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>

score 449 · Accepted Answer · edited Feb 19 '17 at 21:45

449

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.

edited Feb 19 '17 at 21:45

Dave Anderson

10,953
2
54
76

answered Apr 26 '10 at 04:18

Matt Stevens

12,573
3
28
25

4

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. – Matt Stevens Feb 18 '11 at 22:04
This feature seams not to work in iOS6. You can also try using ` – Dan Dec 19 '12 at 07:42
Still working for me on iOS 6. No need to disable zooming entirely. – Matt Stevens Dec 19 '12 at 15:46
@Dan it does work in iOS6 and it also works in iOS7. – Justin Oct 10 '13 at 22:54
13

DON'T use `none`, use `100%` instead, **that's** the behavior you want: http://blog.55minutes.com/2012/04/iphone-text-resizing/ – fregante Nov 08 '13 at 17:55
1

Thank you for this... I have been trying to figure out what was going on with font-sizing in landscape xD – Jeff Shaver Jan 21 '14 at 21:36
3

@bfred.it +1, I think it'd be worthwhile editing this answer with that change. – Ming Mar 26 '14 at 07:22
After looking for hours, finally the genius! Thanks! – Yam Frich Dec 17 '15 at 20:12
It's an amazing tip. Particularly useful if you have captive html locally on the device (to display typical long text "About" pages, etc). – Fattie Jul 04 '16 at 00:51
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! – Garavani Sep 02 '17 at 09:30
After hours of searching, I finally found this! Thank you! – Fouad Mar 24 '18 at 22:29
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 https://stackoverflow.com/questions/40892327/why-is-font-size-changing-depending-on-portrait-or-landscape-for-mobile-devices/40892507#40892507 – Parapluie May 03 '18 at 10:16
Almost a decade later, this answer is still preventing self-harm. Thank you! – MysterFitz Feb 19 '20 at 19:53

score 109 · Answer 2 · answered Sep 25 '12 at 14:21

109

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.

answered Sep 25 '12 at 14:21

crazygringo

1,254
1
8
4

this was huge much thx – StayCool Dec 29 '20 at 09:22

snobojohan · Answer 3 · 2011-02-22T09:41:51.087

25

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

edited Feb 22 '11 at 09:41

answered Feb 18 '11 at 17:38

snobojohan

2,185
20
13

Funnily enough I only got it to work by putting the -webkit property inside the media query. Thanks! – zuallauz Nov 30 '11 at 03:18

Dan · Answer 4 · 2014-02-13T10:31:17.180

13

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

edited Feb 13 '14 at 10:31

answered Dec 19 '12 at 07:49

Dan

48,995
35
110
141

Well, a good question is whether to use comma or semicolon separator in this meta tag! But it works :) – Dan Dec 19 '12 at 08:07
2

I only need `` for it to take effect. – Foxinni Aug 02 '13 at 09:23
1

@Foxinni: thanks, updated the answer. I think these 2 first meta tags were a deprecated garbage from early iOS versions – Dan Aug 05 '13 at 08:14

score 10 · Answer 5 · answered Oct 14 '10 at 13:09

10

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

answered Oct 14 '10 at 13:09

Guillaume

403
4
11

score 9 · Answer 6 · answered Mar 16 '14 at 13:29

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.

score 3 · Answer 7 · answered Oct 14 '14 at 13:16

3

The below code works for me.

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

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

answered Oct 14 '14 at 13:16

Aman

393
3
10

score 1 · Answer 8 · answered Mar 14 '19 at 08:46

1

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.

answered Mar 14 '19 at 08:46

Radek Matěj

469
4
15

Belyash · Answer 9 · 2013-03-27T11:47:33.790

0

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

edited Mar 27 '13 at 11:47

answered Mar 26 '13 at 16:12

Belyash

692
4
17

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

9 Answers9

Linked

Related