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

Answer 1

I believe you are looking for this in your CSS:

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

Answer 2

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.

Answer 3

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.

Eg,

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