iOS9 MobileSafari Viewport Problem

CQe0DfnUwAAqdG7

The viewport is set incorrectly when the viewport meta tag is specified with initial-scale=1 or width=device-width, and the page contains an element (e.g. div tag) that is wider than the desired viewport’s boundary.

In the screenshot above (courtesy @RWD) you can see that the off-screen menu actually appears on-screen in iOS9. Apple changed how iOS9 responds to width=device-width as it, according to them, got abused too much.

To fix this, append shrink-to-fit=no to your viewport meta tag, as such:

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

4 Comments

  1. Thanks for the post! I’ve been looking everywhere for this solution. Adding overflow-x:hidden to the body works as well, but it just seems like such a hacky solution. I wonder if shrink-to-fit=no has any side-effects? So far I haven’t seen any.

Leave a comment

Leave a Reply to Bruno Veiga Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.