Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

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

3:09 am on Mar 1, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Mar 20, 2008
posts: 172
votes: 0

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.
6:52 pm on Mar 1, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

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.
10:51 pm on Mar 1, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Mar 20, 2008
votes: 0

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


10:32 pm on Mar 3, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Mar 20, 2008
votes: 0

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?
12:35 am on Mar 6, 2010 (gmt 0)

New User

5+ Year Member

joined:Mar 4, 2010
posts: 10
votes: 0

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.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members