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 listitems with a hyperlink inside of each li:

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

...My question is how can I format the hyperlinks so that they DON'T change size when viewed on an iPhone, and the accellerometer switches from portrait -> landscape? Right now, I have the hyperlink font size spec'ed to 14px, but when switching to landscape, it blows way up to like 20px. I want the font-size to stay the same. Here is the selector:

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

Answer 1

You can disable this behavior through the -webkit-text-size-adjust CSS property:

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

The use of this property is described further in the Safari Web Content Guide.

Answer 2

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