Remove initial-scale=1.0 from meta viewport #824

Closed
alexgibson opened this Issue Oct 25, 2011 · 33 comments

Comments

Projects
None yet
@alexgibson
Member

alexgibson commented Oct 25, 2011

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

This comment has been minimized.

Show comment
Hide comment
@tchalvak

tchalvak Oct 31, 2011

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

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

@alexgibson

This comment has been minimized.

Show comment
Hide comment
@alexgibson

alexgibson Oct 31, 2011

Member

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?

Member

alexgibson commented Oct 31, 2011

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

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Oct 31, 2011

Member

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.

Member

necolas commented Oct 31, 2011

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

This comment has been minimized.

Show comment
Hide comment
@alexgibson

alexgibson Oct 31, 2011

Member

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

Member

alexgibson commented Oct 31, 2011

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

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Oct 31, 2011

Member

What about differences based on device pixel density?

Member

necolas commented Oct 31, 2011

What about differences based on device pixel density?

@alexgibson

This comment has been minimized.

Show comment
Hide comment
@alexgibson

alexgibson Oct 31, 2011

Member

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.

Member

alexgibson commented Oct 31, 2011

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

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Oct 31, 2011

Member

Ping @mathiasbynens @shichuan

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

Member

necolas commented Oct 31, 2011

Ping @mathiasbynens @shichuan

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

@alexgibson

This comment has been minimized.

Show comment
Hide comment
@alexgibson

alexgibson Oct 31, 2011

Member

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

Member

alexgibson commented Oct 31, 2011

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

@necolas

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Oct 31, 2011

Member

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

Member

necolas commented Oct 31, 2011

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

This comment has been minimized.

Show comment
Hide comment
@alexgibson

alexgibson Oct 31, 2011

Member

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?

Member

alexgibson commented Oct 31, 2011

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

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Oct 31, 2011

Member

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

Member

necolas commented Oct 31, 2011

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

@alexgibson

This comment has been minimized.

Show comment
Hide comment
@alexgibson

alexgibson Oct 31, 2011

Member

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

Member

alexgibson commented Oct 31, 2011

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

This comment has been minimized.

Show comment
Hide comment
@alexgibson

alexgibson Nov 6, 2011

Member

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.

Member

alexgibson commented Nov 6, 2011

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

This comment has been minimized.

Show comment
Hide comment
@nimbupani

nimbupani Nov 6, 2011

Member

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

Member

nimbupani commented Nov 6, 2011

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

@necolas

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Nov 7, 2011

Member

Waiting for @mathiasbynens @shichuan input

Member

necolas commented Nov 7, 2011

Waiting for @mathiasbynens @shichuan input

@mathiasbynens

This comment has been minimized.

Show comment
Hide comment
@mathiasbynens

mathiasbynens Nov 7, 2011

Member

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

Member

mathiasbynens commented Nov 7, 2011

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

@necolas

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Nov 24, 2011

Member

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.

Member

necolas commented Nov 24, 2011

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

This comment has been minimized.

Show comment
Hide comment
@Wilto

Wilto Nov 30, 2011

Member

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

Member

Wilto commented Nov 30, 2011

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

@eddiemonge

This comment has been minimized.

Show comment
Hide comment
@eddiemonge

eddiemonge Nov 30, 2011

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

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

@necolas

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Nov 30, 2011

Member

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

Member

necolas commented Nov 30, 2011

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

@alexgibson

This comment has been minimized.

Show comment
Hide comment
@alexgibson

alexgibson Dec 1, 2011

Member

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

Member

alexgibson commented Dec 1, 2011

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

@shichuan

This comment has been minimized.

Show comment
Hide comment
@shichuan

shichuan Dec 1, 2011

Member

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.

Member

shichuan commented Dec 1, 2011

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

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Dec 1, 2011

Member

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/

Member

necolas commented Dec 1, 2011

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

This comment has been minimized.

Show comment
Hide comment
@alexgibson

alexgibson Dec 1, 2011

Member

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

Member

alexgibson commented Dec 1, 2011

@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

This comment has been minimized.

Show comment
Hide comment
@addyosmani

addyosmani Dec 28, 2011

Contributor

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

Contributor

addyosmani commented Dec 28, 2011

@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

This comment has been minimized.

Show comment
Hide comment
@alexgibson

alexgibson Dec 28, 2011

Member

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

Member

alexgibson commented Dec 28, 2011

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

@ghost ghost assigned necolas Jan 22, 2012

@necolas necolas closed this in 26d6be2 Jan 29, 2012

@andrejcremoznik

This comment has been minimized.

Show comment
Hide comment
@andrejcremoznik

andrejcremoznik Mar 29, 2012

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

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

This comment has been minimized.

Show comment
Hide comment
@RGBboy

RGBboy Apr 27, 2012

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.

RGBboy commented Apr 27, 2012

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

This comment has been minimized.

Show comment
Hide comment
@chrisjaure

chrisjaure May 1, 2012

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.

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

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas May 1, 2012

Member

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

Member

necolas commented May 1, 2012

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

@chrisjaure

This comment has been minimized.

Show comment
Hide comment
@chrisjaure

chrisjaure May 1, 2012

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.

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

This comment has been minimized.

Show comment
Hide comment
@Ganginator

Ganginator Jun 14, 2013

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

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

@azr azr referenced this issue in twbs/bootstrap Jul 1, 2013

Merged

WIP: Bootstrap 3 #6342

120 of 126 tasks complete

@emiluzelac emiluzelac referenced this issue in Automattic/_s Aug 26, 2013

Closed

iPad Rendering Viewport change #285

@Volker-E

This comment has been minimized.

Show comment
Hide comment
@Volker-E

Volker-E Oct 16, 2013

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">

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