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

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

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.

Related Posts