em's not working on iPhone Browser

Question

Ive set my fonts specifically as follows

* {font-size: 1em;}
html {font-size: 125%;}
body{font-size: 50%;}
p, ul, ol{line-height:1.7em; font-size:1.2em; margin-bottom:0.5em; }

Works fine on desktop browsers, and iPad (viewing is identical) - however the font size does not get any smaller on the iphone?

What am I doing wrong?

Answer 1

There are multiple solutions to your problem. Either apply the WebKit-specific text-size-adjust property:

html {
  /* Prevent WebKit-based browsers from resizing the text: */
  -webkit-text-size-adjust: none;
}

Or, you could define the viewport width in your HTML:

<meta name="viewport" content="width=device-width">

This tells the browser that it should use a viewport width equal to the device’s physical width. In most cases this prevents weird in-document text zooming inconsistencies, too.