KYLEJLARSON

iPhone 5 Display Size and Web Design Tips

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

iphone 5 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:
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">

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

Tags: ,

« 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)

  • Pingback: html & CSS | Remiel.???()

  • Pingback: iPhone 5 Display Size and Web Design Tips | Gianmarco D'Emilia()

  • Andrew Kramer

    Hey Kyle, thank you for posting this article. Do you know if it’s possible to disable the pixel doubling? I really have huge problems with optimizing my project for iPhones.

  • http://www.kylejlarson.com Kyle Larson

    Nope, there isn’t since it’s part of the hardware. The idea is that anything should still work, it just won’t look great. If you’re not already familiar with how retina images work here’s a few ways you can implement it: http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/

    I’d suggest just hitting the ‘high value’ targets first. For example a logo in your template or something on your homepage that sticks out. Anytime you can use CSS instead of images that’ll help too (since that automatically scales).

  • Pingback: Dimitri Gielis Blog (Oracle Application Express - APEX): APEX Mobile - iPhone 5 Web App in Fullscreen()

  • http://www.esourceparts.ca/ fix iphone screen

    Have you been upset about the fact that you purchased a black iPhone 4 because Apple was having issues producing the white model? Have you been waiting for a solution to keep your current device and have the ability to switch between the two? If this topic relates to you, look no further, the following article will describe a stepwise approach on how to convert your black iPhone 4 white one.

  • http://websurgenow.com/joes-blog/for-web-hosting-rochester-businesses-can-benefit-from-most-turn-to-websurge/ alison57

    Many thanks for the exciting blog posting! I really enjoyed reading it,

  • Alan

    So which is it? Does an iphone 5 have a resolution of 320×568 or 640×1136?

  • JP

    Thanks for the great info! Do you also have visible area for the iPad on IOS 7 with safari 7?

  • Pingback: The new iPhone’s resolution will reportedly be 150 percent higher — Tech News and Analysis()

  • Pingback: The new iPhone’s resolution will reportedly be 150 percent higher | Technology()

  • Pingback: The new iPhone’s resolution will reportedly be 50 percent higher()

  • Pingback: The new iPhone’s resolution will reportedly be 50 percent higher | Hi-tech news()

  • Pingback: The new iPhone’s resolution will reportedly be 50 percent higher | Content Loop()

  • Cameron White

    Good Trick.

    http://www.whitedigitalweb.com
    White Digital Web only use the Best Designers and Tools which is helpful
    to Creates Website that will be Eye-Catching, Professional and
    Accessible. White Digital Web always perform best Services to our
    Clients. White Digital Web also provide Web Design, Website Design,
    Responsive Web Design, Search Engine Optimization Services, SMM Services
    and E-Commerce Website, CMS System Website like WordPress, Magento,
    Interspire and Big-Commerce.

  • Pingback: WebNinjaTaylor » Designing for Mobile Resolutions()

More Posts