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