iPhone Landscape Zoom Prevent

Writing the CSS for a responsive or mobile site and it inexplicably zooms in when I turned the phone in to landscape mode. I want it to show more text when I rotate, not enlarge the text that is already there.

Yes, This is Mobile

When writing HTML and CSS for mobile layouts you have to include incantations that tell the browser ‘yes, I know about mobile phones with their tiny screens’. If you don’t, they make a bunch of changes to your styles that are intended to make large-screen layouts readable on small screens.

The first thing is the HTML needs to contain

<meta name="viewport" content="width=device-width, initial-scale=1">

Without this the browser will assume you designed your site with 15″ 1024×768-pixel screens in mind, and second-guess the scaling accordingly.

The second thing is you need to include an incantation in your CSS:

-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;

Not to be confused with font-size-adjust, the text-size-adjust setting controls an algorithm for enlarging text on small screens on the assumption it was designed to look good on large screens. A setting of 100% is equivalent to setting it to none, and indicates you think you know what you are doing and have taken small screens in to account.

With the default setting of auto, my iPhone 5c inflates the text in landscape mode so that it appears that it has decided to assume a CSS width of 320 px, which in turn made me think that they had defined the meta viewport so that device-width always means the short dimension of the screen regardless of orientation, which made me wonder what the heck they were thinking.

The upshot of this is that the text-size-adjust incantation should probably be part of your mobile-savvy style-sheet boilerplate.

Google Remembers

If you try to google for this problem then you find a lot of references to an iOS zoom bug and fixes for it in posts from 2011 or 2012. These refer to a different problem, but persist and make it hard to find other references of surprise zooming on orientation change.

Hopefully next time I have this problem and I search for it I will find this article and not one of the red herrings from 2011.