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

iphone html css
DShultz picture DShultz · Apr 26, 2010 · Viewed 96.9k times · Source

I have a mobile web application with an unordered list containing multiple listitems with a hyperlink inside of 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 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 code:

Answer

Matt Stevens picture Matt Stevens · Apr 26, 2010

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.

Related questions

Turn off iPhone/Safari input element rounding

My website renders well on the iPhone/Safari browser, with one exception: My text input fields have a weird rounded style which doesn't look good at all with the rest of my website. Is there a way to instruct Safari (…

Read More
How do I put a clear button inside my HTML text input box like the iPhone does?

I want to have a nice little icon that, when clicked will clear the text in the <INPUT> box. This is to save space rather than having a clear link outside of the input box. My CSS skills …

Read More
Prevent iPhone from zooming form?

The code: <select> <option value="1">Home</option> <option value="2">About</option> <option value="3">Services</option> <option value="4">Contact</option> </select> …

Read More