Why the iPhone display's same size text at different sizes?

[username]

Hi all,

I have a <div id="blah"> tag which sets the text size of the content to go in the div using the following:

#blah{font-size:11px; font-family:Arial;}

I have a label with the same CSS properties:

label{font-size:11px; font-family:Arial;}

The div displays the text much larger and not what it supposed to look like. The label displays just fine. This works fine in all browsers on a PC as desired, just not on the iPhone? Does anyone know why?

This site has not been designed for the iPhone, it is just a standard page, but it is annoying that this is happening. Any ideas?

Thanks in advance.

[rocknbil]

This is a classic example of why you need to be very cautious and open minded in specifying font sizes. By open minded I mean, what the end user may see is very likely to not be what you've designed, so consider the "what if," and program accordingly.

Browsers - and if you are seeing a web page in it, it is a browser - often override your size selections. Users can also override your specs with their settings.

This is especially true of pixel font sizing. What is 10 pixels on an iPhone anyway, physically?

Another aspect, as to "why the difference?" the iPhone's browser may be ignoring the non-semantic specification. Try applying it to semantic elements inside the div, such as #blah p, #blah ul, etc.

There may be specific recommendations for such devices, but I always try to let the device manage it and go with percentages or em's. Example, set it to font-size:75% instead. Also what if the Arial font is not available? Use cascading alternatives: Arial, Helvetica, Sans-Serif.

See if that works for you.

[username]

Thanks rocknbil, I found this article which is an excellent guide to choosing text format per device:

[kyleschaeffer.com...]

Thanks.

[username]

Ok, so after some further testing, I set the font size of the body to font-size:100%; Which my research tells me defaults to 16px equivilant using Arial. I then set styles for a div element to font-size:70%, which would set that style to 12px equivalant. Now the weird thing is, is that this still does not work properly in Safari on the iPhone, yet scales perfectly on all browsers on a PC.

What am I doing wrong? Strangely enough after using Firebug and the IE Dev toolbar to look at other functional sites, they set the body font size using %, then use em's on the page elements. This made no difference for me. The only difference between the functional style sheets and the non functional, is a hasLayout property. Could this, or a container element be causing problems? There is no inheritance other than the body styles though?

[Auciker]

I'm with username, I always make my font-size declarations variable as opposed to fixed for this reason, as well as font +/- tools.

Personally I work in "em", which is basically %, but it's drops all the zero's and special character. 1em = 100%, 1.5em = 150%, etc.