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

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.