I have been doing a loot of web development targetting iphone and ipad, and one of the things you have to work with, is to support rotations.

One thing that has annoyed me a loot is that when you rotate and iPhone using Safari, the font size changes.

In order to avoid this behaviour, we can use the next code:


CSS property: -webkit-text-size-adjust


Description


Specifies a size adjustment for displaying text content in Safari on iPhone.

Syntax

-webkit-text-size-adjust: none | auto | <percentage>;

Values


none
The text size is not adjusted.
auto
The text size is automatically adjusted for Safari on iPhone.
<percentage>
The size in percentage at which to display text in Safari on iPhone.


Solution

Set the html property for text-size-adjust to none:

html {
  -webkit-text-size-adjust: none;
}

Now the browser will not automatically adjust the fonts of the page when it rotates.