iPhone 5 Web Design

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.

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

iphone 5 resolution comparison

	iPhone 1-4s	iPhone 5
Portrait (WxH)	320 x 356 px (320 x 416* / 320 x 460**)	320 x 444 px (320 x 504* / 320 x 548**)
Landscape (WxH)	480 x 196 px (480 x 256* / 480 x 300**)	568 x 196 px (568 x 256* / 568 x 300**)

* – measurements without the 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:
Broken Code:

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

Working Code:

<meta name="viewport" content="user-scalable=0, initial-scale=1.0">

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="images/ios_startup@2x.png" sizes="640x920">
<link rel="apple-touch-startup-image" href="images/ios_startup-large@2x.png" 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.

« Older Newer »

K K

I tried this:

and I putted ios_startup_large@2x.png sized 640*1096 in ‘images’ dir
but the web app still start up in 3.5 inch mode.
What’s wrong with my code? Here is all my settings of launch image
http://www.kylejlarson.com Kyle Larson

Interesting, thanks for testing this out… I wrote the code based on how the previous iPhone worked but haven’t had a way to test it out yet. I added in above that it doesn’t seem to be working from what I’ve heard from a couple people now. Apple hasn’t updated their documentation yet and I haven’t seen anyone mention that they have the startup image working.

I’ll update if anyone can figure out how to fix it.
K K

So apple made this mistake. Thanks for reply : )
K K

Oh god, i did it!

later i’ll post the code i use
K K

This code will do the trick:
http://www.kylejlarson.com Kyle Larson

Awesome, nice work. Thanks for sharing the fix!
Pingback: WebDev: Responsive Webdesign | Annotary
luk

does someone know how to make the bookmarklet work with the iPhone 5 which activates the appmode on the current site?
I’ve already tried some things but it just won’t display fullscreen. The original bookmarklet looks like this:
http://cl.ly/text/1H1b3E3K3T0V
Jared

Hi Kyle, I add the code for the iPhone start up image to my site, and the iPhone 5 start up image works, but the images for the iPhone 4-4S and iPhone 1-3GS do not work. Any ideas on what might be going on. (I have test it on my site and on a fresh html page. Still not working)