Font size em shows differently on certain devices

Question

I'm creating a chat program for the web designed primarily for mobile devices. My issue is that in trying to be as appropriate for mobile devices as possible I dropped pixel font sizes for em, however on my desktop pc with firefox the li text shows as very small and does on the iPad too. On my Nokia Lumia 800 windows phone it shows as much larger.

My CSS:

* { margin:0; padding:0; font-family:arial; }
body > div { width:auto; margin:10px; }
h1 { font-size:1.5em; }
h2 { font-size:4em; text-align:center; }
h2#signIn > a { color:#aaaaaa; }
h2#signIn > a:hover { color:#000000; }
h3 { text-align:left; font-weight:normal; margin:10px; }

ul { list-style:none; }
ul > li { font-size:0.8em; font-weight:normal; padding:5px; text-align:center; }

a { color:#000000; text-decoration:none; font-variant:small-caps; }
a:hover { color:#aaaaaa; }
div.fieldContainer { display:block; border:1px solid #000000; padding:5px; }
span.yell, span.wire { font-variant:small-caps; }
span.wire { color:#aaaaaa; }

input[type="text"], input[type="password"]
{
    width:100%; margin:0;
    font-size:2em; border:0;
}

input[type="button"]
{
    width:100%; padding:10px; font-size:2em;
    font-variant:small-caps; letter-spacing:2px;
    border:1px solid #000000; background-color:#dddddd;
}

#messages
{
    width:100%; height:200px;
    border:0; padding:0; margin:0;
    overflow:auto; font-size:0.9em;
}

span.msgTime { font-size:0.7em; }

.fromMe { color:#aaaaaa; }
.fromYou { color:#000000; }
.clear { clear:both; }

As you can see the list element uses 0.8em. I realise there are browser inconsistencies but is this really unavoidable?

I also use this to make sure the scale of the web pages show properly:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 

update 1

I think it's worth mentioning that all other relative font sizes look fine, it appears to only be the list element that differs across the mobile browsers.

Answer 1

em is a measurement relative to the current font size. If the browsers all have a different default base font size, then they'll look differently. Try using pt instead which is still appropriate for different size screens and is not fixed like px would be.

http://www.w3schools.com/cssref/css_units.asp

Answer 2

Each browser has its own default stylesheet which sets the base text size. Ems are relative units that change size based on that default text size. Try giving your body a font-size:16px, just as an example, and see if that doesn't make the text show at the same size.

To be more clear here is a link to help explain why I suggest using a pixel size on the body element, and only that element. http://www.alistapart.com/articles/fluidgrids/

Answer 3

In css file line no 1 shows

* { margin:0; padding:0; font-family:arial; }

replace it with

* { margin:0; padding:0; font-family:arial; font-size: 1em; }

it will work!

Answer 4

If you wish to let each browser use its default font size, presumably suitable for the device, simply do not set body font size at all and do not use a meta tag to prevent scaling, as you are now.

If you think that “one size fits all” is your way, then set font sizes in pixels or points (different approaches), instead of trying to achieve that using the em unit.