homepage Welcome to WebmasterWorld Guest from 23.22.29.137
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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




msg:4089072
 3:09 am on Mar 1, 2010 (gmt 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.

 

rocknbil




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

username




msg:4089552
 10:51 pm on Mar 1, 2010 (gmt 0)

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

[kyleschaeffer.com...]

Thanks.

username




msg:4091111
 10:32 pm on Mar 3, 2010 (gmt 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?

Auciker




msg:4092433
 12:35 am on Mar 6, 2010 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved