I have this simple HTML generated from React
<!doctype html>
<html><head><title data-react-helmet="true"></title><style type="text/css" data-styled-components="" data-styled-components-is-local="true"></style></head><body><div id="app"><div data-reactroot="">Hello</div></div></body></html>
When I open it in Chrome with mobile view, the page dimension is bigger than screen size. In this example, the iPhone 5 dimension is 320x568 but my page width is already 980px. There is no CSS used on the
This forces me to use bigger font size which looks normal on that page but becomes really big on desktop. How the page size can be bigger than screen size? How's that happen?
What you're looking for is the #media selector. You read more about it here.
At the bottom of your code (or anywhere you like, but it's bet to put it at the bottom), you'd add
#media only screen and (max-width: ##px) {
}
Where you see "##", you'd put the max-width of the phone screens you're trying to display code in.
On the inside of the brackets, you can rewrite your entire website to fit specifically to a phone (and it'd only show up on a phone with a max-width of ##px or less), or you can simply edit one thing, such as the font-size in this post.
Say for instance in your primary post you had
.desktop {
font-size: 30px;
}
For phone, you'd put
#media only screen and (max-width: 568px) {
.desktop {
font-size: 15px;
}
}
I hope this helps out! If so, don't forget to upvote and mark as acceptable.
Found the solution here, simply adding meta tag for viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
There are pages in the website that require reworking, such as converting everything to a single vertical column for mobile screens. In the React Native EditScreenInfo title_uri, I added a query string: mob=yes. The value isn't important, but the server code uses it to determine if it's called from a mobile device. So the server code determines which layout is to be used. I also used JavaScript to make the text as big as possible in the various tags for mobile.
Related
Im creating a responsive site and i didn't understand why my document width is 980px, even tho im in braves inspector tool with a responsive size of 428x807. If i set a media query like this:
#media only screen and (max-width: 576px) {
h4 {
color:blue;
}
}
Should this not say that if the screen is less than 576px its supposed to be colored blue? How come the inspector and the actual size of document is different?
There is a special mate tag to force browsers, in particular mobile ones, to be real about their viewport widths. This tag is
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and should be included in the head of your document. Historically mobile devices would pretend to have desktop sizes since websites weren't expected at all to be rendered at such small screen sizes when mobile devices were first popularised. We are talking about the blackberry era here and it was deemed more appropriate to render a website extremely zoomed out on mobile so that you could zoom in as needed and at least see all the content as intended. I hope this is your problem because otherwise I can't think of another explanation.
So I made a noob developers mistake and made the standard web page before the mobile version. So naturally when I open my Web page via mobile it's completely messed up. I can write a mobile css file and link it how ever I'm
Wondering if anyone knows of any black magic html or css formating I can append to my files as a fix.
I've manipulated viewport contents
Display width and #media but the solution eludes me.
Again I'm new but committed so thanks in advance.
You can configure your file by using this CSS
#media only screen and (max-width: 720px) {
body {
background-color: lightblue;
margin: 0px;
}
}
The 720px is the average size of most smartphones. You will need to add this meta tag to your html pages as well
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope this helps
The easy way would be to move all your desktop-specific code into a min-width media query that looks like this:
#media screen and (min-width: 1000px)
Where 1000px is wherever your website needs to switch to mobile styling. This way, all your desktop CSS will be applied down to your first breakpoint. In this example, once you get below 1000px your desktop-specific CSS will stop being applied and your mobile CSS can take over.
Place your mobile CSS outside of all your media queries. Once the desktop CSS stops being applied, the browser will fall back to the "default" mobile CSS.
I am building a responsive website which will be running on smartphones like iPhone having high pixel density screens. I know that in order to maintain legibility, mobile phones' browsers report a resolution half that of actual screen resolution.
I searched about this and found that this behavior can be controlled by using css media query of device pixel ratio (for e.g. #media screen and (-webkit-min-device-pixel-ratio: 2) ) for iPhone.
I tried using this by putting my entire css code within this block, but my iPhone still displayed the page exactly as it was displaying it without using this media query.
How can I force iPhone and other high pixel density mobile phones to display my webpage at its actual resolution? i.e. for iPhone 5, it should display my webpage at 640px*1136px and not 320px*568px as it is now showing. I know that this will make my text appear smaller, but I still wish to format my webpage like that.
I am using the following meta code in my HTML:-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
Thanks.
Putting your CSS rules in the media query doesn't affect how the browser renders it, if you don't change the CSS rules. You could try with something like this:
.element {
width: 100px;
}
#media -webkit-device-min-pixel-ratio: 2 {
.element {
width: 200px;
}
}
Basically you can explicitly double the size when the device pixel ratio is double. Unfortunately with this technique you have to use a different media query with different sizes for all possible pixel ratio that you have to deal with.
Otherwise you can play with the width attribute of the viewport meta tag. If your page has a fixed-width layout, you can set its width as viewport width. For example if you have use a "standard" with of 960px, you can use the following meta tag:
<meta name="viewport" content="width=960px">
I'm developing a mobile site for the first time and i'm trying to create a responsive design.
So far i'm having a lot of trouble with the viewstate settings. Mostly on Android but also some on iPhone.
I'm using these settings:
And i'm also using this in my CSS (just to be sure):
#-ms-viewport { width: device-width; }
#-o-viewport { width: device-width; }
#viewport { width: device-width; }
It works perfect most of the time on my iPhone. But sometimes when i change to landscape and then back to normal, the resolution of the page gets smaller. And sometimes it stays the same (as it should).
On the Android phone it works perfectly both in landscape and normal modes. Here my problem is, that sometimes when i refresh the page, it seems like the mobile doesn't read the viewport settings at all. It just looks like a normal webpage that isn't optimized for mobile.
Anyone have an idea about what i'm doing wrong here?
EDIT
i also tried to add the meta viewport tags (i don't know why my code doesn't show up in this post, but that doesn't Work either).
You could start by simplifying and rechecking your code.
In the head of your page make sure you have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If there are additional viewport tags, remove them for now.
For the media queries in your CSS use
#media (max-width: 767px){ /* adjust viewport width as req'd */
.selector{ ... }
}
and remove the the other # tags you've used (eg #-ms-viewport)
Good luck!
I am using CSS and some of the fonts on my mobile are breaking up the Divs and not messing up the rest of the html. Is there a way to limit the font size in the css styled Divs?
For example I have a button that looks fine on computers but this same button text is too large or not the right size on my phone and does not appear correctly in the button.
I am including a picture of what it looks like on a computer.
I am using a DROID. If you are using your cell phone you can see the link here: http://www.edvizenor.com/?p=PicturePoll&id=33
CSS media queries might be what you're looking for. You can change the font size (or whatever else you want) based on the device width, for example:
#media all and (max-device-width: 480px) {
.changeThisFont {
font-size: 0.5em;
}
}
You might also add something like this in your HTML head:
<meta name="viewport" content="width=600, initial-scale=1">