Question

I develop a simple mobile page; the font displayed is very samll although I set it as 33px and the screen resolution for iPhone is 320 X 480.

Does anyone know why it is so small? Or the screen resolution is not 320 X 480 since it can be zoomed. Then how do I make the font to be adapted to the resolution automatically?

Was it helpful?

Solution

Safari can be zoomed in and out, so a CSS pixel doesn't always equal a screen pixel (especially when the iPhone 4's denser screen comes out - you wouldn't want your website to be 1/4 the size just because there are more pixels stuffed into the display!).

You can turn off Safari's zooming with a special meta tag, as described in the Apple docs:

<meta name="viewport" content="user-scalable=no, width=device-width" />
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top