Skip to content
This repository

Remove initial-scale=1.0 from meta viewport #824

Closed
alexgibson opened this Issue October 25, 2011 · 33 comments
Alex Gibson

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)

Roy Ronalds

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

Alex Gibson

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?

Nicolas Gallagher
Owner

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.

Alex Gibson

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? :)

Nicolas Gallagher
Owner

What about differences based on device pixel density?

Alex Gibson

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.

Nicolas Gallagher
Owner

Ping @mathiasbynens @shichuan

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

Alex Gibson

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

Nicolas Gallagher
Owner

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

Alex Gibson

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?

Nicolas Gallagher
Owner

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

Alex Gibson

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

Alex Gibson

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.

Divya Manian
Owner

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

Nicolas Gallagher
Owner

Waiting for @mathiasbynens @shichuan input

Mathias Bynens

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

Nicolas Gallagher
Owner

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.

Mat Marquis

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

Eddie Monge

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

Nicolas Gallagher
Owner

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

Alex Gibson

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

Shi Chuan

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.

Nicolas Gallagher
Owner

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/

Alex Gibson

@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.

Addy Osmani

@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?

Alex Gibson

@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.

Nicolas Gallagher necolas closed this in 26d6be2 January 29, 2012
Ben Kutil benkutil referenced this issue from a commit February 04, 2012
Commit has since been removed from the repository and is no longer available.
Andrej Čremožnik

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.

Chris Jaure

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.

Nicolas Gallagher
Owner
necolas commented May 01, 2012

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

Chris Jaure

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.

Jesse Gangi

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

Adrien Delorme Azer- referenced this issue in twbs/bootstrap July 01, 2013
Merged

WIP: Bootstrap 3 #6342

120 of 126 tasks complete
Emil Uzelac emiluzelac referenced this issue in Automattic/_s August 26, 2013
Closed

iPad Rendering Viewport change #285

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">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.