iPhone 6 Screen Apoplexia

Starting to feel like you’re totally losing the plot now that your iOS app can find itself living in five twenty-two different point dimensions,

COMPACT WIDTH (stacked view):

  • 320 x 480 – up to iPhone 4S Portrait
  • 320 x 568 – iPhone 5/5S/5SE Portrait
  • 320 x 768 – iPad Slipover Landscape, Split Landscape 2/3 right
  • 320 x 1024 – iPad Slipover Portrait, Split Portrait right
  • 375 x 667 – iPhone 6/6S Portrait
  • 375 x 1024 – iPad Pro Slipover Landscape, Split Landscape 3/4 right
  • 375 x 1366 – iPad Pro Slipover Portrait, Split Portrait right
  • 414 x 736 – iPhone 6+/6s+ Portrait
  • 438 x 1024 – iPad Split Portrait left
  • 480 x 320 – up to iPhone 4S Landscape
  • 507 x 768 – iPad Split Landscape 1/2 left&right
  • 568 x 320 – iPhone 5/5S/5SE Landscape
  • 639 x 1366 – iPad Pro Split Portrait left
  • 667 x 375 – iPhone 6, 6s Landscape

REGULAR WIDTH (column view):

  • 678 x 1024 – iPad Pro Split Landscape 1/2 left&right
  • 694 x 768 – iPad Split Landscape 2/3 left
  • 736 x 414 – iPhone 6+, 6s+ Landscape
  • 768 x 1024 – iPad Fullscreen Portrait
  • 981 x 1024 – iPad Pro Split Landscape 3/4 left
  • 1024 x 768 – iPad Fullscreen Landscape
  • 1024 x 1366 – iPad Pro Fullscreen Portrait
  • 1366 x 1024 – iPad Pro Fullscreen Landscape

and three different point scales,

  • @1x: up to iPhone 3GS/iPod 3G/iPad 2/iPad mini 1
  • @2x: everything later except
  • @3x: iPhone 6+/6+S

and even a logical to physical downsampling discrepancy on top of that? Here, go check this out to explain it:

iPhone 6 Screens Demystified

To demonstrate different rendering of pixels on various devices, we compare how 1-point wide line is rendered on

Original iPhone – without retina display. Scaling factor is 1.

iPhone 5 – with Retina display, scaling factor is 2.

iPhone 6 Plus – with Retina display HD. Scaling factor is 3 and the image is afterwards downscaled from rendered 2208 × 1242 pixels to 1920 × 1080 pixels.

The downscaling ratio is 1920 / 2208 = 1080 / 1242 = 20 / 23. That means every 23 pixels from the original render have to be mapped to 20 physical pixels. In other words the image is scaled down to approximately 87% of its original size…

TL;DR: If you haven’t yet … it’s time to buy PaintCode!

UPDATES:

See Tips: Auto Layout and PaintCode By Numbers

The Ultimate Guide To iPhone Resolutions

Using Vector Images in Xcode 6

Xcode 6: Live Rendering, Visual View Debugging, and Swift

How to design for thumbs in the Era of Huge Screens

What iOS 8 Means for App Design

What’s our Vector, Victor?

Open Source: Category For Easy Embedding Of PDF Images In iOS Apps For Scalable Images

JAMSVGImage: “Display resolution independent SVGs in iOS.”; SVGPath: “Parse SVG path strings into UIBezierPaths in Swift”; The Ultimate Guide to SVG; check out our old SVGKit notes

iPhone 6 Plus Pixel Peeping; … Follow-up

iOS Device Summary: March 2016 Updates

Alex | September 12, 2014
  • linkslinkslinks September 13, 2014 at 1:25 pm
    That link goes nowhere.
    • Alex Curylo September 13, 2014 at 1:35 pm
      Whoops, thank you. Straight to the App Store now, I trust.

Leave a Reply