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.