iPhone 5 Display Size and Web Design Tips
September 13th, 2012 by Kyle Larson
Apple’s newest phone, the iPhone 5, was announced yesterday and it will be available to the public on September 21st. The biggest change for web designers to be aware of is the new screen dimensions. While app developers will have to make updates for their apps to run in full screen, our websites will simply have more available screen real estate. Web designers should be aware of what will be displayed before scrolling (what is above the fold) and how to update the start-up image for your web app.
The directions below apply to the iPhone 5s resolution and icon settings as well.
iPhone 5 Resolution
The iPhone 5 resolution has increased to 1,136 x 640 px at the same 326 pixels per inch (ppi) as previous Retina Devices. The iPhone automatically scales the viewport to fit 980 px so it works well with most webpages without any changes. If you’d like to specifically target the default screen size of the iPhone for a mobile site you can add the following metatag:
<meta name="viewport" content="initial-scale=1.0">
Apple has a reference of the available options for the viewport metatag.
The default full screen size of the iPhone 5 is 320 x 568 px (w x h). This is half of the screen resolution because of the pixel doubling in a Retina Display. If you’re looking to see what will be displayed ‘above the fold’ (what the user can see before scrolling), you’ll also need to keep in mind the size of the OS bar and the browser UI. Here are the key numbers you’ll need to know for previous versions of the iPhone and the iPhone 5:
iPhone Resolution Comparison
*Updated for iOS7. On versions older than iOS7 the browser bar has an additional 16px
|iPhone 1-4s||iPhone 5|
|Portrait (WxH)||320 x 372 px
(320 x 440* / 320 x 460**)
|320 x 460 px
(320 x 528* / 320 x 548**)
|Landscape (WxH)||480 x 212 px
(480 x 280* / 480 x 300**)
|568 x 212 px
(568 x 280* / 568 x 300**)
* – measurements with the small browser navigation bar
** – measurements without any browser chrome for a web app
If you are building a website that you would like to work well on many devices, I’d highly recommend looking into responsive webdesign. Ethan Marcotte has a great article on Responsive Web Design at A List Apart to get you started.
iPhone 5 Web App Not Fullscreen
If you’re having issues with your web app not running at full screen on iPhone 5 (web app is letterboxed), it is likely due to an issue with the viewport metatag. The new iPhone doesn’t seem to like the width being set in the metatag. When you remove it, the issue is fixed. For example:
<meta name="viewport" content="user-scalable=0, initial-scale=1.0, width=device-width">
<meta name="viewport" content="user-scalable=0, initial-scale=1.0">
You may also need to remove the status bar style if you had it set previously. For example this should be removed:
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
iPhone 5 Startup Image
Updated based on code shared by K K in the comments below.
If you’d like to make your website a web app so users can save it to their phone and run it similar to an app, you can make an iPhone startup image to display while the page is loading.
First make sure you do not have width in your viewport metatag, that seems to make web apps run in the smaller mode, as mentioned above.
Then add the web app metatag:
<meta name="apple-mobile-web-app-capable" content="yes" />
Then create graphics at these sizes for compatibility with each phone:
|iPhone 1 – 3gs:||320 x 460 px|
|iPhone 4 – 4s:||640 x 920 px|
|iPhone 5:||640 x 1096 px|
Then add the code in your page’s header to link to them:
<link rel="apple-touch-startup-image" href="images/ios_startup.png"> <link rel="apple-touch-startup-image" href="firstname.lastname@example.org" sizes="640x920"> <link rel="apple-touch-startup-image" href="email@example.com" sizes="640x1096">
iPhone 5 Retina Images
The iPhone 5 supports retina images just like the iPhone 4 & 4s. There are a variety of methods for adding these images, but the basic concept is to create an image at 2x the size you’d like it displayed and then tell the browser to display it at half of that size. The Retina Device will see the extra pixels in the image and display them. I’ve written a blog post on some methods for adding Retina images to your website for reference. The startup images described above are Retina-ready.
iPhone 5 Web App Icons
The iPhone 5’s icons are the same resolution as the Retina iPhone 4/4s. Here is a blog post describing how to create an app icon for your site.