3

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.

Lee
  • 3,869
  • 12
  • 45
  • 65

4 Answers4

4

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

Samuel Neff
  • 73,278
  • 17
  • 138
  • 182
  • Thank you, I forgot about `pt`. – Lee Aug 24 '12 at 16:46
  • 2
    pt is a fixed size, too. Possibly differently fixed than px, but still. – Jukka K. Korpela Aug 24 '12 at 16:47
  • 1
    @JukkaK.Korpela, it's fixed based on inches, not based on pixels. The advantage is screens with a super high resolution will still display them at the same physical size, even if it takes more pixels to get to that size. – Samuel Neff Aug 24 '12 at 16:50
  • 1
    @SamuelNeff, but “inch” does not really mean “inch” in CSS. It may also be anchored to the px unit. Explained in http://www.w3.org/TR/css3-values/ – Jukka K. Korpela Aug 24 '12 at 16:55
  • 1
    Thanks Samuel this works just as I wanted it to. On the windows phone using IE it appears relatively proportional to how I see it on my desktop firefox browser. – Lee Aug 24 '12 at 16:55
  • 1
    @JukkaK.Korpela, what it says is that if you use "px" then "px" on one device will not be the same physical, "in", units on another device. If you use "in", then "in" on one device will not be the same pixel, "px" on another device. This is exactly what we want, "pt" which is different "px" on each device based on the device's resolution. – Samuel Neff Aug 24 '12 at 16:59
  • 1
    @SamuelNeff, no, it describes two possible systems, and it specifically defines: “1px is equal to 1/96th of 1in”. – Jukka K. Korpela Aug 24 '12 at 17:20
1

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/

hradac
  • 2,431
  • 1
  • 19
  • 21
  • Thanks for your answer. I understand that `em` sizes are relative which is why I have adopted them. I did think of using pixel sizes but wouldn't that be a no-no for mobile devices? – Lee Aug 24 '12 at 16:45
  • What I suggest is that you use a pixel size once to set a baseline for all your `ems` to go off of. The default text size is different in each browser so the `ems` start with different baseline sizes. Setting an explicit size on `body` lets all your `ems` start from the same size. In this case 1em = 16px. – hradac Aug 27 '12 at 11:45
0

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!

Mohsin Patel
  • 226
  • 1
  • 15
-1

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • ok, but without the meta tag the scaling is off and requires to user to pinch zoom. using `pt` works perfectly. – Lee Aug 24 '12 at 16:53