Meta Viewport tag currently in use is broken on iOS

[Snugug]

Using only width=device-width causes iOS to fix the width and not update on orientation change. Including initial-scale=1.0 solves this issue. Take a look at the viewport test I've made.

[necolas]

Related #1099 (comment)

[necolas]

Fixed by ff37dba. Thanks

[Snugug]

Awesome, thanks!

[jelmerdemaat]

I searched through the issues and found this one before opening a new one regarding initial-scale=1: see http://www.quirksmode.org/blog/archives/2013/10/initialscale1_m.html

I propose to change the meta tag to not include width=device-width at all.

One common problem on iOS is that, when you use a meta viewport tag with width=device-width, the page doesn’t react to an orientation change. On the iPhone the page becomes 320px wide and on the iPad 768px, regardless of whether you’re in portrait or in landscape mode.

As advised on Quirksmode by @pp-koch:

Note: do not use width=device-width, or iOS will revert back to its usual behaviour.

Is this a wanted change?

[alrra]

Is this a wanted change?

@jelmerdemaat we should discuss this. Can you open a new issue and maybe even provide some test pages ? Thanks!

[jelmerdemaat]

Can you open a new issue and maybe even provide some test pages ? Thanks!

I can certainly open a new issue, later today. I have no experience with making test pages but I will certainly try and provide my examples with the issue!

[alrra]

I can certainly open a new issue, later today. I have no experience with making test pages but I will certainly try and provide my examples with the issue!

Great, thanks!

[roblarsen]

(Randomly) in looking at this issue I discovered that @pp-koch (who I'm sure has a test page or two) is on Github and has a total of 2 followers.

[necolas]

I thought this bug was patched in iOS6, which is why this was reintroduced in both this and the mobile BP project

[jelmerdemaat]

I have not made a new issue yet because I have not yet been able to reproduce the problem. @Snugug already made a demo page which indeed seems buggy for me, but at the moment I am only able to test with iOS 5.1.1. Can anyone confirm the behavior described in the Quirksmode post for iOS6 and/or iOS7 using the provided demo?

[jonathantneal]

Other pages are the same, except No Viewport Tag which displays the zoomed-out green as expected.

[jelmerdemaat]

And when you rotate the device to landscape? As I understand the problem would occur when the orientation changes, the layout would stick to 320px wide.

[jonathantneal]

@jelmerdemaat, from the test you mentioned:

[Device]: [reported width as portrait, color] => [reported width as landscape, color] => [reported width as portrait, color]

No Viewport Tag: 980px, green => 980px, green => 980px, green
Device Width + Initial Scale: 320px, red => 568px, green, => 320px, red
Device Width Only: 320px, red => 568px, red => 181px, red
Initial Scale Only: 320px, red => 568px, green => 320px, red

Device Width Only zooms, misrepresents the width, and rather humorously misrepresents the width on return to portrait.

[alrra]

from: http://www.quirksmode.org/blog/archives/2013/10/more_about_scal.html

combining width=device-width,initial-scale=1 does work.

[mathiasbynens]

Classic trolling by @ppk :)

[jelmerdemaat]

Oh... well... hooray! :) Thanks guys 👍