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

Question

I have a mobile web application with an unordered list containing multiple items with a hyperlink inside each li:

My question is: how can I format the hyperlinks so that they DON'T change size when viewed on an iPhone, and the accelerometer switches from portrait to landscape?

In portrait mode, I have the hyperlink font size set at 14px, but when I switch the device to landscape, it blows way up to 20px.

I would like the font-size to stay the same.

Here is the example code:

ul li a {
    font-size:14px;
    text-decoration: none;
    color: #cc9999;
}

<ul>
    <li id="home" class="active">
      <a href="home.html">HOME</a>
    </li>
    <li id="home" class="active">
      <a href="test.html">TEST</a>
    </li>
</ul>

Matsuyama

Answer 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.

Artimas

As snobojohan notes you can wrap this in a landscape-specific media query to preserve the ability to increase the font size on desktop browsers. This is not necessary on iOS-targeted pages where pinch zooming will work regardless. – Artimas

This feature seams not to work in iOS6. You can also try using <meta content="viewport" meta tag (see below) – Envoi

Still working for me on iOS 6. No need to disable zooming entirely. – Artimas

@Envoi it does work in iOS6 and it also works in iOS7. – Think

DON'T use none, use 100% instead, that's the behavior you want: blog.55minutes.com/2012/04/iphone-text-resizing – Cheng

Thank you for this... I have been trying to figure out what was going on with font-sizing in landscape xD – Moneywort

@bfred.it +1, I think it'd be worthwhile editing this answer with that change. – Angulate

After looking for hours, finally the genius! Thanks! – Skirret

It's an amazing tip. Particularly useful if you have captive html locally on the device (to display typical long text "About" pages, etc). – Ambiguous

Awesome! And it not only solves hyperlink font-size problems. I had trouble with rotated texts and font-sizes. Debug console shows correct rule but calculated value was different. This rule solved it! Huge thanks! – Frenchman

After hours of searching, I finally found this! Thank you! – Smyth

We should also consider using moz and ms prefixes, as in html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} as in #40892827 – Stere

Almost a decade later, this answer is still preventing self-harm. Thank you! – Hyades

Answer 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.

Marbling

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

Rabb

Funnily enough I only got it to work by putting the -webkit property inside the media query. Thanks! – Holinshed

Answer 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">

Envoi

Well, a good question is whether to use comma or semicolon separator in this meta tag! But it works :) – Envoi

I only need <meta name="viewport" content="width=device-width, initial-scale=1.0"> for it to take effect. – Halfwitted

@Foxinni: thanks, updated the answer. I think these 2 first meta tags were a deprecated garbage from early iOS versions – Envoi

Answer 5

You could also opt for using a CSS reset, such as normalize.css, which includes the same rule that crazygringo recommends:

/**
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

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

As you see, it also includes a vendor specific rule for the IE Phone.

For current information about the implementation in different browsers, refer to the MDN reference page.

Condition

Answer 6

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;" />

Ikkela

Answer 7

As of March 2019 text-size-adjust has a reasonable support amongst mobile browsers.

body {
  text-size-adjust: none;
}

Using viewport meta tag has no effect on the text size adjustment and setting user-scalable: no does not even work in IOS Safari.

Balanchine

Answer 8

The below code works for me.

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

Try with clearing your browser cache if it does not work.

Wiggle

Answer 9

In my case this trouble has been because I used CSS attribute width: 100% for HTML tag input type="text".

I changed value of width to 60% and add padding-right:38%.

input {
    padding-right: 38%;
    width: 60%;
}

Merth