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

Sickly

Just as an update, the HTML5BP docs say "There are a few different options that you can use with this meta tag. You can find out more in the Apple developer docs". – Sickly

Oh, I just noticed that they also link to "Complete Idiot's Guide to Viewport and Media Queries!!!"... I've read it a few times and I'm still a little lost. :D – Sickly

As of June 25, 2012, there's some interesting info here. – Sickly

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.

Wilmington

Thanks so much for the reply! Due to space limitations for comments, I have appended my reply to my original question. Thanks again! (P.S. I can't up-vote your reply until my rep hits 15... Sorry about that.) – Sickly

Just a quick thought: HTML5BP did not start using <meta name="viewport" content="width=device-width"> until recently... That's why I asked if it was the "new standard" (considering that so many people look to HTML5BP as starting point for their projects). Are we now going to see a ton of sites not using initial-scale=1 which, in turn, will make it the new viewport meta "standard"/"trend" (that is, for those folks that use HTML5BP as a starting point)? – Sickly

@MickyHulse I don't know, I'd start by checking the comments on the commit to HTML5BP where it changed and see if it mentions why. – Wilmington

It is how things have always worked in iOS, but not on many other mobile devices. – Infante

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.

Infante

Thanks for the details and explanations. +1. Since posting this question, I've settled on using <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- rgne.ws/MOkRAX --> in the <head> and having <script src="ios-orientationchange-fix.js"></script> <!-- rgne.ws/PYrfbZ --> at the foot of my templates. – Sickly

I too have been tying my mind in pretzels trying to understand the viewport options for an adaptive web design project. The really unfortunate answer is that every platform behaves differently. Developers that are focused mostly on Android or mostly on Apple tend to think there is only one behavior, and are frequently surprised/concerned when they try the other. – Infante

I agree Bailey. My focus has been mostly on iOS devices, mostly because I don't have easy access to Android stuff. Also, just as an update, it appears as though the iOS orientation bug has been fixed in iOS6. I have not found any articles detailing this, but from what I have tested, iOS6 no longer exhibits the orientation "bug". Based on this new information, I'm going to stop including the ios-orientationchange-fix script in my templates. – Sickly

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/

Heat

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

Virg

Answer 5

did you try this?

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

Kohl

maximum-scale=1 is said to be harmful https://mcmap.net/q/393233/-meta-viewport-and-width-device-width-vs-percent-dimentions – Fright