Question

I know this has been asked but I’m still confounded.

I’m trying to build a dead-simple page for the iPhone: logo at the top, phone number, address, and a BG that takes up the entire screen (no-repeat).

When I ran a script that printed the screenwidth and screenheight I got: 320px * 480px.

However, when I created a div of those exact dimensions it’s tiny. What gives? Should a box that’s the entire size of the detected resolution not take up the entire screen?

So, if I’m designing a page for iPhone and I want it to take up the entire screen in Safari (on the iPhone) exactly what resolution should I be designing for?

I’m using an iPhone 3G running iOS 4.0 as my testing device.

Thanks for any help.

Answer 1

You need the viewport meta tag to tell the iPhone your website has been specifically designed for it.

Use this:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

You can change the scaling options if you need the user to zoom etc..

Also if you want your app to work in landscape mode as well, you can set the width to 100%.

#wrapper {
    width: 100%
    max-width: 480px;
}