Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I am making html5 pages to be loaded on iPhone. And have a question about font sizing.
For example: some text has font size 20px. If I load this text 3g device font size if ok. When I load the same page on 4g (higher resolution) – the font looks the same size. I would expect font to be smaller, as resolution is higher.
May I ask you to explain this?
thank you
It doesn’t quite work like that.
Devices in iOS have a ‘scale factor’. This is the number of pixels on the screen that correspond to a single point. Both the iPhone 3G and iPhone 4 have a screen that is 320×480 points. However, the iPhone 4 has a scale factor of 2, so its pixel size is 640×960.
iOS is clever enough to figure out that if you’re explicitly setting a pixel size in HTML you probably want it scaled up for a retina display. So it multiplies the pixel dimension by the scale factor of the screen (which is 2). Your 20 pixel font is rendered as if it was a 40 pixel font.
If you particularly care about providing two different styles for retina and non-retina it’s possible to detect it in mobile safari. See here for more info: http://blog.iwalt.com/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries.html