shrink-to-fit=no fixes zoom problem in iOS 9

By Mattias Kihlström

In iOS 9 Apple has changed how Safari handles the viewport zoom at page load.

Before, if you added <meta name="viewport" content="width=device-width, initial-scale=1"> to the head of your HTML document, you knew that the page would render at the width of the device (in CSS pixels) and be zoomed at 100%. Any elements wider than the device width or absolute positioned elements outside of the normal viewport would not affect the initial zoom.

After the release of iOS 9 this is no longer the way it works. Instead of initially hiding things that does not fit the page horizontally, the browser will now automatically zoom out to accommodate everything. Luckily there is a fix. Add shrink-to-fit=no to the viewport meta element, like this:

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

But why wasn't this left as the default behavior?