Skip to content

Instantly share code, notes, and snippets.

@kylegach
Last active August 29, 2015 14:02
Show Gist options
  • Save kylegach/0f204cfa9a50751c4fcd to your computer and use it in GitHub Desktop.
Save kylegach/0f204cfa9a50751c4fcd to your computer and use it in GitHub Desktop.
Quick question about meta viewport
According to http://quirksmode.org/mobile/metaviewport/, iOS Safari has an issue with using 'width=device-width' when in landscape orientation. This fits with our experience: our responsive sites (e.g. http://mo-springfield.civicplus.com & http://wa-snohomishcounty.civicplus.com) are not resizing properly if loaded in portrait then rotated to landscape.
I noticed that http://filamentgroup.com is _not_ subject to the issue, despite using the same meta viewport values we are, so I was hoping you could take a moment to explain how you've managed that.
Additionally, you cannot pinch-to-zoom on our sites, but we, like you, are not using 'user-scalable=no'.
Btw, I was astonished at how quickly you were able to get the FG site loaded. Very nice work!
@scottjehl
Copy link

Not sure I can speak to why it's different. I will say our own site isn't the first one that I've worked on that doesn't have this problem, though!

Do the sites in question combine @viewport CSS rules by any chance? (Ours has none in play)

@kylegach
Copy link
Author

No, they do not. Though I was looking at dropping the 'width=device-width' (which fixes the issue) and adding @-ms-viewport, @Viewport to the CSS to get the IE support back. Seems there's problems with that, too: http://css-tricks.com/snippets/javascript/fix-ie-10-on-windows-phone-8-viewport/

Thanks for the quick reply, Scott.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment