What is the iPhone screen resolution?

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.

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

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">

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

The official apple documentation on this is here:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

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.

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.

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" />

In MonoTouch, try

 var yourFrame = FrameForOrientation(CurrentInterfaceOrientation);

with these methods

public static UIInterfaceOrientation CurrentInterfaceOrientation {
    get {
        return UIApplication.SharedApplication.StatusBarOrientation;
    }
}

public static RectangleF FrameForOrientation(UIInterfaceOrientation orientation, bool subtractStatusBarHeight = true) {
    var screen = UIScreen.MainScreen;
    var fullScreenRect = screen.Bounds;      // always implicitly in Portrait orientation.
    var appFrame = screen.ApplicationFrame;


    // Initially assume portrait orientation.
    var width = fullScreenRect.Width;
    var height = fullScreenRect.Height;

    // Correct for orientation.
    if (IsLandscapeOrientation(orientation)) {
        width = fullScreenRect.Height;
        height = fullScreenRect.Width;
    }

    var startHeight = 0.0f;
    if (subtractStatusBarHeight) {
        // Find status bar height by checking which dimension of the applicationFrame is narrower than screen bounds.
        // Little bit ugly looking, but it'll still work even if they change the status bar height in future.
        var statusBarHeight = Math.Max((fullScreenRect.Width - appFrame.Width), (fullScreenRect.Height- appFrame.Height));

        // Account for status bar, which always subtracts from the height (since it's always at the top of the screen).
        height -= statusBarHeight;
        startHeight = statusBarHeight;
    }
    return new RectangleF(0, startHeight, width, height);
}

public static bool IsLandscapeOrientation(UIInterfaceOrientation orientation) {
    return 
        orientation == UIInterfaceOrientation.LandscapeLeft ||
        orientation == UIInterfaceOrientation.LandscapeRight;
}