Font size issue with iPhone

Question

Im currently working on a mobile version of a website, everything is great, works fine on an iPhone, Blackberry and Android.

I have one slight problem, not a big deal but still a little annoying. I have:

<h1> tags set to 18px and bold
<h2> tags set to 12px and bold
<p> tags set to 12px and normal

Now everything looks great on the iPhone when viewing in portrait, but when the device is rotated to landscape the <h1> titles go smaller (hard to tell but possibly smaller than the <h2> tags?!

Here is my css:

h1 {
 color:#FFFFFF;
 font-size:18px;
 line-height:22px;
 font-weight:bold;
 margin-top:0px;
}

h2 {
 font-size:12px;
 color:#333333;
 font-weight:bold;
 margin-bottom:-5px;
}

p {
 color:#333333;
 font-size:12px;
 line-height:18px;
 font-weight:normal;
}

possible duplicate of [Preserve HTML font-size when iPhone orientation changes from portrait to landscape](http://stackoverflow.com/questions/2710764/preserve-html-font-size-when-iphone-orientation-changes-from-portrait-to-landsca) — Blazemonger, May 30 '12 at 22:09

score 62 · Accepted Answer · answered Aug 12 '10 at 09:49

62

I believe you are looking for this in your CSS:

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

answered Aug 12 '10 at 09:49

Barrie Reader

10,474
11
67
132

Works perfectly! Cheers, shall mark answer as correct soon as i can! – Ryano Aug 12 '10 at 09:51
1

After hours of playing you saved my life ! Thanks @Neurofluxation. – dvlden Nov 02 '12 at 14:25
4

Believe me, when I found out about it - My jaw dropped, I started sweating and my heart skipped a beat... But really all I did was shout "F*CK YEAH" – Barrie Reader Nov 02 '12 at 16:15
But why does 'span' tag resize text on rotation and 'a' tag not?! – Dmitry Nov 23 '14 at 22:13
Thanks Dude ! Css is amazing and so are you !! – Swastik Pareek Mar 18 '15 at 09:03

score 17 · Answer 2 · edited May 23 '17 at 12:01

17

A better solution can be using 100% instead of none, as stated by user612626 in an older thread: Font size rendering inconsistencies on an iPhone

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

this way desktop webkit browsers can adjust size and zoom proportionally too. I think this is a better approach than filtering by screen size.

Hope it helps.

edited May 23 '17 at 12:01

Community

1
1

answered Aug 29 '12 at 18:36

Cazuma Nii Cavalcanti

1,412
14
9

AlexD · Answer 3 · 2013-07-21T03:58:15.170

As stated in Neurofluxation's answer you can use the css rule -webkit-text-size-adjust but beware that this can prevent users from adjusting the font size on desktop Webkit as well (see this article for more details).

In light of this it's likely worth checking via CSS3 media queries (or user agent) to be safe.

E.g.,

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

Font size issue with iPhone

3 Answers3

Linked