Preserve HTML font-size when iPhone orientation changes from portrait to landscape

Solution 1:

You can disable this behavior through the -webkit-text-size-adjust CSS property:

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

The use of this property is described further in the Safari Web Content Guide.

Solution 2:

Note: if you use

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

then this will disable zoom behavior in default browsers. A better solution is:

html {
    -webkit-text-size-adjust: 100%;
}

This corrects the iPhone/iPad behavior, without changing desktop behavior.

Solution 3:

Using -webkit-text-size-adjust: none; directly on html breaks the ability to zoom text in all webkit browsers. You should combine this with som media queries specific for iOS. For example:

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
     html {
        -webkit-text-size-adjust: none;
     }
}

Solution 4:

As it was mentioned before, CSS rule

 -webkit-text-size-adjust: none

does no longer work in modern devices.

Fortunately, a new solution comes for iOS5 and iOS6 (todo: what about iOS7?):

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

You can also add , user-scalable=0 to turn off pinch zooming, so your website would behave like a native app. If your design brakes when user zooms, use this meta tag instead:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Solution 5:

You can add a meta in the HTML header:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />