Remove initial-scale=1.0 from meta viewport

[alexgibson]

The inclusion of the property initial-scale=1.0 in the meta viewport causes the zoom on rotation "bug" to happen on iOS devices. If you remove this property, the bug does not occur and the OS performs it's system default zoom on rotation.

I vote for removing this property as default on the mobile boilerplate because:

1.) it means messy JS hacks like the meta viewport JS fix are not needed.
2.) we stop seeing lots of sites that either a.) break on rotate/zoom b.) fail to pinch/zoom until the second gesture occurs
3.) it lets iOS perform it's default system behaviour, keeping in-line with user expectations.

Until there is a better fix I just see the current defaults causing more trouble than they're worth?

Just some food for thought.

P.S - I also opened this issue on the MPB, but then thought it could more appropriate here (https://github.com/shichuan/mobile-html5-boilerplate/issues/67)

[tchalvak]

Would be nice to know what the result of removal is in android devices.

[alexgibson]

If you're using width=device-width, none as far as I can tell. At least, all the sites I have tested using Android emulator seem to work just fine.

Unless someone can shed any more light as to why this property was included to begin with?

[necolas]

There was a fair bit of testing that went into this line of code, and I've seen presentations by Opera staff that also recommended it. When using it, you just have to accept the orientation bug in mobile Safari for now. If you remove initial-scale doesn't Opera resize the site? We should dig out the original test results.

[alexgibson]

Works fine here without initial-scale on Opera Mini (iOS) and Opera Mobile 11 Emulator?

I'd be interested to see the original test results, perhaps time to consider a review? :)

[necolas]

What about differences based on device pixel density?

[alexgibson]

With the exception of using targetDensityDpi on Android or Opera (which is not part of the boilerplate default), browsers handle this automatically? I'm not sure it has any bearing on the initial-scale property, unless someone can correct me on this.

Edit - testing different screen densities on Opera Mobile Emulator, does not seem to cause any problems, as far as I can tell.

[necolas]

Ping @mathiasbynens @shichuan

Also, our documentation on this seems non-existant. So whatever happens, the code needs better reasoning in the wiki.

[alexgibson]

Done some quick tests in Firefox Mobile (nighties) - omitting initial-scale seems ok here also.

[necolas]

Here's an old google doc on the reasons for the current code, not sure if it helps much: https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4

[alexgibson]

From the google doc:

On most smartphones, default scaling may occur that will 'zoom' your pages on mobile browser. To prevent user scaling, you can use initial-scale=1.0.

I think this needs more clarification. Browsers will zoom the page to fit the viewport automatically when using width=device-width, but does adding initial-scale=1.0 not just confirm the already implied default?

Can anyone supply details on which platforms initial-scale prevents user scaling on? And from a best practice point of view, is this something we should be doing if so?

[necolas]

I suspect that was meant to say "default scaling" rather than "user scaling"

[alexgibson]

I found this useful info on Android dev site (been updated since I last viewed it)

initial-scale
The initial scale of the page. The value is a float that indicates a multiplier for your web page size, relative to the screen size. For example, if you set the initial scale to "1.0" then the web page is displayed to match the resolution of the target density 1-to-1. If set to "2.0", then the page is enlarged (zoomed in) by a factor of 2.
The default initial scale is calculated to fit the web page in the viewport size. Because the default viewport width is 800 pixels, if the device screen resolution is less than 800 pixels wide, the initial scale is something less than 1.0, by default, in order to fit the 800-pixel-wide page on the screen.

So, there are scenarios when the implied initial zoom may not be 1.0. But for a flexible, mobile-first or responsive design approach, does this carry weight to still need it? I'm not sure, but I think given the effect it has on iOS by its inclusion, it is worth giving some more thought.

URL: http://developer.android.com/guide/webapps/targeting.html

[alexgibson]

I've just got an Android test device running 2.3 (Gingerbread) and leaving out initial-scale doesn't seem to cause any issues on either the stock browser, Opera Mobile or Opera Mini.

[nimbupani]

Sounds like we can drop this as Alex mentioned? Anyone has objections?

[necolas]

Waiting for @mathiasbynens @shichuan input

[mathiasbynens]

+1 to what @alexgibson said; I never use initial-scale myself.

[necolas]

Ok since there seems to be no arguments or compelling evidence in favour of keeping the initial-scale, we may as well progress with Alex's suggestion.

[Wilto]

Hey, sorry I’m late to this—removing initial-scale=1 is completely fine by me!

[eddiemonge]

Was it tested on Android devices of different resolutions? 320x240 or 480x800 for example?

[necolas]

Jonathan Neal is working on some comprehensive tests and will report back when he's done

[alexgibson]

Good stuff - I only have a single Android device (aside from the emulators). More devices tested the better.

[chuanxshi]

I have tested on iOS5, after removing initial-scale=1.0, the default zooming behavior cause quite a big text jump when rotating happens, and it looks pretty undesirable.

[necolas]

Here's some data @jonathantneal has managed to collect so far (he said some of it may need to be rechecked)

https://gist.github.com/1410787

You can help add to it by recording your results from the test pages here:

http://sandbox.thewikies.com/orientation/

[alexgibson]

@shichuan - am unable to reproduce what you describe here on iOS5? If anything, the inclusion of initial-scale causes the undesirable jump? Removing it just causes the smooth zoom on rotation you see on regular desktop sites?

Edit - if what you are describing as undesirable is the OS default zoom - this is the built-in browser behaviour. The same happens with desktop sites - you rotate to zoom in & read. I don't think we should be changing this given the other undesirable effects it produces.

[addyosmani]

@alexgibson @shichuan wasn't able to reproduce the text jump here. Were there any other concerns/issues stopping us from removing initial-scale=1.0?

[alexgibson]

@addyosmani The only real side effect on iOS is you don't get the full 480px of space while in landscape, but this is the same non-reflow behaviour the OS performs by default for regular desktop sites.

Jeremy Keith recently posted a write up covering iOS behaviour called 'iWish' here: http://adactio.com/journal/5088/

If Apple fixed this as per Jeremy's suggestion it would be great. But currently I feel keeping initial-scale in the meta viewport degrades the iOS user experience considerably, and the JS fix introduces its own bugs that makes pinch/zoom unresponsive.

If removing the initial-scale property does not have any adverse side effects on other platforms, I vote for removing the property.

[andrejcremoznik]

You might still need initial scale in certain situations where pixel precision is necessary.

For instance, if you have a div with fixed width and height and you apply a background color and background image with the same dimensions to it, the background color might still bleed 1px through the edges on iDevices. Adding initial-scale=1 fixes the issue

[RGBboy]

You can circumvent the zoom on rotation "bug" by adding maximum-scale=1.0 with the initial-scale=1.0. This however has the side-effect that you can no longer zoom in to a page which may be an accessibility problem.

[chrisjaure]

I think there probably needs to be better documentation on this. As has been mentioned, in some cases, the default zooming may be undesirable.

In my case, I spent a good while trying to figure out why the text size was increasing in landscape. Initially I thought I was fine with just width=device-width and -webkit-text-size-adjust:100% but just happened to stumble upon the fix because I didn't really know what was wrong.

Explicitly outlining the two behaviors in the docs would be helpful.

[necolas]

Feel free to modify the relevant wiki page or share what you'd like to be included.

[chrisjaure]

I don't think I have enough background information on the behavior of other mobile browsers (my issue was with Mobile Safari), but something like the following would be nice to add to the mobile viewport section on this page https://github.com/h5bp/html5-boilerplate/wiki/html

As is, this meta tag will allow the mobile browser's default behavior of increasing the text size on orientation change from portrait to landscape. If you wish to prevent this behavior and force the same text size for both orientations, use

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

but note that Mobile Safari contains a scaling bug when changing from portrait to landscape. For more information, read this article.

[Ganginator]

Hasn't these issues been fixed, and therefore the inclusion of initial scale is important now?

[Volker-E]

Turning the whole issue upside down: http://blog.goetter.fr/post/32513655620/viewport-adieu-width-device-width and http://www.quirksmode.org/blog/archives/2013/10/initialscale1_m.html
In short: Not ´initial-scale=1.0´ seems to be the reason for the iOS "rotation" bug, but ´width-device-width´. Therefore the authors pledge for using

<meta name="viewport" content="initial-scale=1">