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


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


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


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


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.