HTML5 Boilerplate: Meta viewport and width=device-width

Question

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:

1. Is this becoming the new standard (i.e. zoom when in landscape mode)?
2. 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

Answer 1

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.

Answer 2

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.

Answer 3

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/

Answer 4

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

Answer 5

did you try this?

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">