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:

Answer 1

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.