viewport device-width: incorrect width / large font in Safari landscape (correct on Chrome)

Question

After adding <meta name = "viewport" content = "width = device-width" to my responsive HTML5 page, the default 1em fonts do show up at an appropriate and usable size on all mobile devices, including iOS Safari; however, rotating the screen from the vertical portrait to the horizontal landscape position results in a change of font size (everything on the page gets too big, even though interface elements remain the same), and this change only happens in Safari on iOS, and not in Chrome on Android.

Why does the font-size change on rotation in Safari? I thought the above meta was sufficient to signify that my site is optimised to be responsive for all screen sizes, is that not the case?

is there an extra quirk that must be specified for iOS Safari? Why is it assuming that my site is incapable of being viewed when scaled to device-width even though that's exactly what's specified?!

Answer 1

This appears to be a MSIE-like mishap of major proportions in iOS MobileSafari; in fact, it's even bigger than that, because for whichever reasons, it apparently wasn't actually picked up by Chrome.

According to https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html:

Because iOS runs on devices with different screen resolutions, you should use the constants instead of numeric values when referring to the dimensions of a device. Use device-width for the width of the device and device-height for the height in portrait orientation.

Apparently, the functionality is so ridiculously confusing that they themselves can't even document it properly!

LMFTFY:

Use device-width for the width of the device and device-height for the height width in portrait orientation.

It turns out, there does exist a JavaScript-free workaround around this width not actually being the width, after all:

You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0, then set both of these properties.

LMFTFY:

You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0, then set both of these properties. if you practice responsive web-design, then you should only set the initial-scale to be 1.0, and leave the width property alone.

E.g., apparently, the common advise of setting width=device-width is utterly and ridiculously wrong if Safari compatibility is desired, and the viewport property should instead be set to initial-scale = 1.0.

This appears to be acknowledged deep down at https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=en (although their tl;dr summary still presents incorrect information):

Some browsers will keep the page’s width constant when rotating to landscape mode, and zoom rather than reflow to fill the screen. Adding the attribute initial-scale=1 instructs browsers to establish a 1:1 relationship between CSS pixels and device-independent pixels regardless of device orientation, and allows the page to take advantage of the full landscape width.

In summary:

-<meta name = 'viewport' content = 'width = device-width' />
+<meta name = 'viewport' content = 'initial-scale = 1' />