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!
Related
Currently, when I use CSS "vw" units (viewport width), the browser seems to always use the browser viewport, regardless of what the meta viewport is. For example, please see this jsfiddle:
https://jsfiddle.net/darrengates/ywvc6x51/
In this example, I have:
<meta name="viewport" content="width=75, initial-scale=1">
In the css, if I specify:
.vw-75 {
width: 100vw;
}
Then, I'm hoping to force any content with the "vw-75" class to be 75px, since the meta viewport is set to "width=75". Is there any way that I can force "vw" units to obey the meta value?
For those wondering "why would you ever want to do this?":
I have a website that uses VW units all over the place (for font sizes, div sizes, border sizes, etc.). Due to the requirements of the website, I want the maximum viewable area to be different based on browser, device, language, etc. In other words, the viewable content area might be anywhere from about 500px to 2000px. Rather than change all of the vw values to % values, or add a ton of new media queries (a huge task due to the site size), I'm hoping to just dynamically set the meta viewport.
Try removing , initial-scale=1 from your meta tag:
<meta name="viewport" content="width=75">
The problem may simply be that jsfiddle doesn't apply the <meta> tag.
I have not been able to find a definitive definition of what initial-scale=1.0 and initial-scale=2.0 means.
What do they both mean?
I know initial-scale has to do with the zoom, I just don't know what it's values from 1-10 mean.
Source: https://www.w3.org/TR/css-device-adapt-1/#translate-meta-to-at-viewport
A usual mobile responsive site would contain a HTML meta tag in the head like the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
Within the tag the width property controls the size of the viewport. It can be set either to a precise number of pixels like width=400 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. device-width is the most commonly used width for responsive websites that scale across different screen sizes.
When the page is first loaded the initial-scale property controls the initial zoom level ie 1 Viewport pixel = 1 CSS pixel. User-scalable, maximum-scale and minimum-scale properties control how the user is able to zoom the page in or out.
You could setup an example html page and include the viewport tag and change the initial-scale attribute to see the difference. Also try viewing the page on different viewport sizes and orientation.
initial-scale: The initial zoom when visiting the page. 1.0 does not zoom.
To answer what initial-scale=2.0 means here is an example of using 2.0:
In addition to the above, you may want to specify the initial zoom factor for the viewing area. If you want to set the viewport of your page to be equal to the device’s width and have it zoom in by default with a factor of 2 for example, this property will come in handy. The code for that would look as follows:.
The Image above shows what this would look like — although it is not a particularly practical demonstration of the possibilities the initial scale setting has to offer, the underlying point should be clear: content is blown up with a factor of 2 upon first load.
https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/#initial-scale
Some good references to checkout:
https://css-tricks.com/snippets/html/responsive-meta-tag/
https://css-tricks.com/probably-use-initial-scale1/
I looked through an old book and found the answer as to what the values mean. I have not been able to verify it using a more official resource such as W3C.
The possible range of values for initial-scale are between 10% - 1000% or 0.1 - 10.0.
0.1 = 10% zoom
0.2 = 20% zoom
...
1.0 = 100%
2.0 = 200%
...
10.0 = 1000%
I have yet to test these out on actual devices.
I see setting maximum-scale=1 in viewport meta will stop user to scaling zooming in&out. Then why we need user-scalable at all? And I also see a page with maximum-scale=1 and user-scalable=yes at the same time. What's the usage here? In my understanding, user will be not able to scale the whole page, but for the content, maybe a column chart, user can scale it. Is it right?
If the layout width, specified either explicitly with "width=" or implicitly by leaving out the width argument, is larger than the screen width of the device, the user can zoom out (and most browsers will load the page fully zoomed out). At this point, the scale will be less than 1 so setting just maximum-scale=1 means the user can zoom in until the scale reaches 1, just not any closer. The range of page scale in Safari/Chrome is [0.25,5].
You're right though that user-scalable is redundant, but you need to specify a minimum-scale equal to the maximum-scale in order to disable any scaling. e.g. <meta name="viewport" content="minimum-scale=1, maximum-scale=1">.
Is there any HTTP header or HTML meta tag for telling the web client which height and width are the optimal ones for using with a given site?
I'm going on a limb here, but are you referring to the viewport meta tag?
<meta name="viewport" content="width=300px, initial-scale=1, maximum-scale=1">
Here is a link to the usage of it.
This part is what I find important and relates to your question on that same address.
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.
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">