Viewport Bug in Mobile Safari on iPhone and iPad
This bug had me scratching my head for awhile to find a solution. Viewport settings should be used for iPad and iPhone. If done right, this will result in a properly sized page and a more crisp rendering. Will also play nice with your CSS Media Queries.
The Problem
When I rotate my iPhone or iPad from portrait to landscape view, the viewport does not resize itself automatically.
Instead, it keeps the device-width to be the same width as portrait view, in landscape view and throws the CSS rendering totally off.
From there, a user has to pinch to resize to see the desired CSS. Now that’s not user-friendly.
The Viewport
Below is the code that was giving me trouble:
[code lang=”html”]
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
[/code]
The Fix
Oddly enough, it was super simple to fix. After a bit of research and a ton of Googling. I found the following solution:
[code lang=”html”]
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />
[/code]
For some reason, it does appear to be a bug, switching the values like initial-scale to equal 1.0 instead of 1 will fix the rendering error. Worked for me!
Hope this helps you.