Coder Perfect

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


I’m working on a mobile web app that has an unordered list with several items and a hyperlink inside each li:

My concern is: how can I arrange the hyperlinks such that they don’t resize when viewed on an iPhone and the accelerometer flips from portrait to landscape mode?

I have the hyperlink font size set at 14px in portrait mode, but when I go to landscape mode, it swells to 20px.

I’d prefer to keep the font size the same.

Here’s an example of code:

Asked by DShultz

Solution #1

The -webkit-text-size-adjust CSS property can be used to suppress this behavior:

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

The Safari Web Content Guide goes into greater detail on how to use this feature.

Answered by Matt Stevens

Solution #2

Please keep in mind that if you utilize

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

The zoom behavior in default browsers will be disabled as a result of this. A better alternative is:

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

This fixes the iPhone/iPad behavior while leaving the desktop alone.

Answered by crazygringo

Solution #3

In all webkit browsers, using -webkit-text-size-adjust: none; directly on html kills the ability to zoom text. This should be combined with some iOS-specific media queries. Consider the following scenario:

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

Answered by snobojohan

Solution #4

CSS, as previously said, is a rule.

 -webkit-text-size-adjust: none

Doesn’t operate on newer devices anymore.

Fortunately, for iOS5 and iOS6 (todo: what about iOS7), a new option is available:

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

Add, user-scalable=0 to disable pinch zooming and make your website behave like a native app. Use this meta tag instead if your design breaks when the user zooms in:

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

Answered by Dan

Solution #5

In the HTML header, you can include the following meta:

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

Answered by Guillaume

Post is based on