iOS Viewport Orientation and initial-scale
Published: 27 May 2013
This might be what you’re looking for:
initial-scale=1.0 part. Slap that in your
<head> tag and you should be set. Without that, in landscape orientation your responsive page might look more like it’s zoomed in instead of actually reflowing to the extra width.
In my recent testing with responsive webpages, I came across something that wasn’t exactly a deal breaker in any of my cases yet, but it just plain bothered me. When I would view the webpage on an iPhone or iPod Touch and change the orientation from portrait to landscape, everything (logo, header, text) seemed to almost double in size so that it took up the width of the viewport the same as it did in portrait orientation. The text had the same wrapping, the logo was in the same relative place, and it got so big that the only thing visible at the top of the page was the logo.
I knew that it was possible to do it differently because I had seen microsoft.com do it successsfully. When viewing their homepage in landscape orientation, the text and elements flow differently than they do in portrait. I had googled around about this but many answers were talking about the text-size-adjust CSS solution to just the font size problem. So I cracked open developer tools to do some code comparison, and almost immediately saw something different in the
<meta name="viewport"> tag.
Mine just had:
Theirs had an extra value in the
Here’s how it looks after adding that value to my website:
Is your font-size still looking strange in landscape? Along with initial-scale, you might also need to make use of the text-size-adjust CSS solution like this:
If you’re using normalize.css, you’re already covered; they’ve got it right towards the top.
comments powered by Disqus