What is the iPhone screen resolution?

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

It depends on which iPhone. The original, 3G and 3GS are 320x480, the 4.0 is double that, at 640x960. If you design for the higher resolution, the older phones will scale it down 50% and it should look fine.

You might want to also look into using media queries to optimize the iPhone experience. There is more about that in this blog post.

Answer 2

The problem is that the iPhone is trying to scale it on its own. If you put this tag in the head of your page, it will tell the phone "Don't worry, I'll handle the sizing of the content on my own" and will force the screen to a 1:1 ratio.

<meta name = "viewport" content="inital-scale=1.0">

Answer 3

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;
}

Answer 4

The other answers are correct that you need to configure the viewport.

The official apple documentation on this is here:

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW1

It's worth skimming through the whole document - as well as a lot of description of the viewport tag (complete with pictures!), it also has lots of other useful advice for targeting web pages to the iphone.

Answer 5

you probably want to use all of these

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<!-- this one tells Mobile Safari to hide the Address Bar and make the app fullscreen -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />