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

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.


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.


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;
     }
}

Tags:

Html

Css

Iphone