Please see the simple snippet. I am using chrome 58.
While i turned on device mode, iphone 6 (375*667px), computed width
shows:490px.
While i turn off device mode, and narrow down the viewport width to
exactly 375px, the computed width shows 187px.
why is that kind of difference?
div {
height:100px;
background-color:green;
width:50vw;
}
<div></div>
This isn't specific to Chrome, but rather because screen resolution is not equal to browser window size. The CSS unit vw stands for viewport width, and is relative to the viewport. This is your screen minus the reserved space of the browser chrome. Keeping in mind how many different devices and browsers there are, this reserved space can differ greatly. For more information on this, see Screen Resolution != Browser-Window.
To work around this, you can set the viewport width in the <meta> to be measured off of the device-width:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" />
It's also recommended to use media queries to target specific breakpoints. If you want to get fancy, you can even target specific devices. To help with this, WebSiteDimensions has a nice chart illustrating the various different 'safe areas' for different devices.
Hope this helps! :)
Related
My site requires at least 720px width. Iphone 6 appears a resolution of 1334x750 but their browser reports 667px. Samsung S5 supposedly is 1080x1920 but the browser reports 640.
I know the screen can handle the details but I'm not sure how to get a larger resolution. I need 720px to be the minimum width so what do I do to have phones <720px to scale correctly? By scale I mean show all 720px without any scrolling
You need to start with this in the head code <meta name="viewport" content="width=device-width,initial-scale=1">
then add media queries to you css sheet that support all current devices
http://codepen.io/mlegg10/pen/JKdOaj
If I understand you correctly, you want your contents width to be scaled down to the width of the viewport. This is usually done automatically unless the code contains the following line in the head section of the page:
<meta name="viewport" content="width=device-width, initial-scale=1">
So if this is in your code, remove it. (But note that you make your page non-responsive that way, which is rather unusual nowadays!)
Concerning your observations in regard to device pixels: This has to do with "pixel density" which is important for the better display/sharpness of text (fonts) and vector graphics, as well as images if high-resolution images are supplied to the browser. For example the iPhone 6 actually has a height of 1334 physical pixels (ratio 1:2), which is however treated as 667px when it comes to CSS pixel units.
Input this in .css code before using the code design
#media only screen and (min-width:720px)
and (max-width:1336px) and (min-resolution
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">
Researching viewport behaviour, I've hit a bit of a snag in understanding the meta viewport declaration.
I see width=device-width and initial-scale=1 used together a lot but, as far as I can tell, the latter implies the former.
MDN also mentions that defining both a width and initial-scale=1 will result in the width acting as a minimum viewport width. If this is the case then is there any need to define the width as device-width? Surely the initial-scale can't be 1 with any layout viewport smaller than the device-width anyway.
Am I missing something or is defining the width as device-width redundant here?
Thanks
Using both width=device-width and initial-scale=1 ensure cross browser/device compatibility. For example, for iOS devices, initial-scale=1 is needed for your page to pick up on orientation change of the device as width=device-width will not. Using both ensure maximum effectiveness using the meta viewport tag.
The 2 tags are not the same.
The 'width=device' tag tells the browser to use the device's real width as the 100% width of the screen. If you omit it, a mobile device will simulate as if it has higher resolution and your content will not be stretched to full width.
The initial-scale is the zoom level on first load. If it is set to 1, along with 'width=device', then the content will not be zoomed out or in. You will also not be able to zoom out more than the initial scale (but you will still be able to zoom in). That will be as if you set 'minimum-scale' to 1 as well.
There is also a 'maximum-scale' and if you set it to 1 as well, the user will not be able to zoom in more than the initial scale.
This is an example of how you can create an 'app-like' feeling, where the content uses the device's width in a 1:1 ratio.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
Hope this helps!
I have a native mobile website which should work on different viewport sizes, but instead of changing the attributes with media queries I want only to change the initial scale of the website.
How can I change the initial scale for different viewport sizes?
Works it with media queries?
You can do this with javascript, I have done something similar like this:
if (document.documentElement.clientWidth < 480) {
document
.querySelector("meta[name=viewport]")
.setAttribute('content', 'initial-scale=0.4', 'maximum-scale=0.4', 'width=768');
};
This is for a site that is designed for iPad but I want it to scale out for iPhones etc..
Probably the most common way of setting the the "initial scale" is by instructing the browser to use the width of the device as the width of the viewport:
<meta name="viewport" content="width=device-width" />
To follow on to your secondary quesions, yes this obviously works well with varied viewport sizes by setting the viewport width relative to the device width, and is compatible with media queries.
This article provides further detail: http://tech.bluesmoon.info/2011/01/device-width-and-how-not-to-hate-your.html
I'm building an adaptive/responsive website.
Regarding this recent change to the HTML5BP:
"mobile/iOS css revisions"
I've started using:
<meta name="viewport" content="width=device-width">
... and I have this in my CSS:
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
When initial-scale=1 was included, rotating from vertical to horizontal (on iPad/iPhone) caused the layout to change from 2 columns (for example) to 3 columns (due to meida queries, initial-scale=1 and JS fix for viewport scale bug).
To summarize, when in landscape mode, this zooms the page:
<meta name="viewport" content="width=device-width">
... and this does not:
<meta name="viewport" content="width=device-width, initial-scale=1">
Note: You can see this zooming effect in action when viewing the HTML5BP website on an iPad/iPhone.
My questions:
Is this becoming the new standard (i.e. zoom when in landscape mode)?
I'm having a heck of a time explaining this change to my co-workers and bosses... They're used to seeing a different layout in horizontal mode; now that the page zooms and the layout stays the same (except it's larger). Any tips on how to explain this to the ignorant masses (of which, I might be included)?
#robertc: Thanks! That's very helpful.
I actually like not having the initial-scale=1; it's my co-workers who are used to seeing the layout change rather than zoom. I'm sure I'll be forced to add initial-scale=1 just to please everyone (because not zooming, and seeing the layout change, is what they're used to seeing).
I just noticed the HTML5BP index.html on github, and the website, was using <meta name="viewport" content="width=device-width">; to me, that's good enough reason to ditch initial-scale=1, but I get raised eyebrows when I try to explain these things to the "non-geeks". :D
It's not a new standard, it's how it's always worked AFAIK. If you set the width to a fixed number of pixels, then rotating portrait to landscape just changes the scale, because the number of virtual pixels remains constant. I'm guessing that adding initial-scale=1 is blocking the scaling as you switch between - that is the scaling factor of your page doesn't change as the device is rotated. What does the page look like if you load it initially in landscape instead of portrait?
I would suggest that if you want the behaviour you get when you specify initial-scale=1, then specify initial-scale=1. HTML5 BoilerPlate is something you're supposed to modify to suit your own requirements.
Apple [somewhat] clearly describes the viewport behavior here.
Chiefly, device-width and device-height in iOS devices refer to the screen dimensions in portrait mode. If you set the viewport width to device-width, it is the same as setting it to a constant value. Therefore, when the physical width of the screen changes with an aspect change, the browser stretches the constant size you entered to the width of the screen in landscape mode. This behavior is neither wrong nor right, it just is.
Apple suggests width=device-width for apps tailored to the platform, so it is certainly the "Apple" way of doing it:
If you are designing a web application specifically for iOS, then the
recommended size for your webpages is the size of the visible area on
iOS. Apple recommends that you set the width to device-width so that
the scale is 1.0 in portrait orientation and the viewport is not
resized when the user changes to landscape orientation.
[ie. The viewport retains portrait device width, but is scaled or stretched for presentation to fit the landscape width]
Personally, I prefer the initial-scale=1.0 with no absolute device-width setting approach, since it makes the viewport always fill the device screen without stretching. Apple considers this valid markup as well:
Figure 3-14 shows the same webpage when the initial scale is set to
1.0 on iPhone. Safari on iOS infers the width and height to fit the webpage in the visible area. The viewport width is set to device-width
in portrait orientation and device-height in landscape orientation.
To add a little update: This is still in draft form, but it's definitely something to look into. Also has a prefixed version for IE 10 support. By using CSS instead of HTML it clears up a lot of the confusion you're speaking on by applying the initial-scale:1; to zoom:1; and giving min/max options for width, height, & zoom which furter increases the range of adjustment should it be required.
extend-to-zoom to the rescue! (http://dev.w3.org/csswg/css-device-adapt/#lsquoextend-to-zoomrsquo)
<meta name="viewport" content="initial-scale=1.0"> translates to…
#viewport{
zoom: 1.0;
width: extend-to-zoom;
}
#-ms-viewport{
width: extend-to-zoom;
zoom: 1.0;
}
where as <meta name="viewport" content="width:device-width,initial-scale=1.0"> translates to…
#viewport{
zoom: 1.0;
width: device-width; /* = 100vw */
}
#-ms-viewport{
width: device-width;
zoom: 1.0;
}
Note: width:extend-to-zoom 100%; is equal to width:device-width;
http://dev.w3.org/csswg/css-device-adapt/
I found Mozilla's viewport explanation the most detailed and helpful. Here's a excerpt:
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out
did you try this?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">