iOS9 MobileSafari Viewport Problem


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


  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

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.