Font size em shows differently on certain devices
css, mobile, standards, web-standards, windows-mobile
Solution
`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
Problem
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.