What is iPhone screen resolution?

Question

I know this was asked, but I'm still confused.

I'm trying to create a simple page for the iPhone: the logo at the top, the phone number, address and BG, which occupies the entire screen (without repetition).

When I ran a script that printed the width of the screen and the screen table, I got: 320px * 480px.

However, when I created the div from these exact sizes, it is tiny. What gives? Should the box be used so that the entire size of the detected resolution does not occupy the entire screen?

So, if I am developing a page for the iPhone, and I want it to take up the entire screen in Safari (on the iPhone), with what resolution should I design?

I am using an iPhone 3G running iOS 4.0 as my test device.

Thanks for any help.

Answer 1

You need the viewport meta tag to tell iPhone that your site 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 a user to zoom, etc.

Also, if you want your application to also work in landscape mode, you can set the width to 100%.

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

Answer 2

The problem is that the iPhone is trying to scale it on its own. If you put this tag at the top of your page, it will tell the phone “Don’t worry, I’ll handle the size of the content myself” and make the screen 1: 1.

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

Answer 3

The other answers are true that you need to adjust the viewport.

Apple's official documentation on this subject is here:

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

It is worth scrolling through the entire document - as well as a lot of description for the tag of the viewport (complete with pictures!), There are also many other useful tips for targeting web pages on iphone.

Answer 4

It depends on which iPhone. Original, 3G and 3GS - 320x480, 4.0 - this is twice as much as the 640x960. If you are developing a higher resolution, older phones will reduce it by 50% and it should look normal.

You might also want to explore the use of media queries to optimize your iPhone. This is described in more detail in this blog post .

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

Answer 6

In MonoTouch, try

  var yourFrame = FrameForOrientation(CurrentInterfaceOrientation); 

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