How iPhone-only Apps Appear on iPad
Introduction
As most iOS developers are hopefully aware, so-called “iPhone-only” apps can also be run on iPad. The app thinks it is running on an iPhone and appears with an iPhone-like screen size and aspect ratio. For most iPads, and for most iOS versions, this is the equivalent of a 3.5" iPhone 4/4S appearance (320×480 points), centred in the middle of the screen.
A button toggles between showing the app at a pixel perfect 640×920 pixel or a doubled 1280×1840 pixel size. (These sizes are for retina iPads. The original non-retina iPad used half this.) Importantly, an integral scaling factor is used to avoid any blurring. At the larger size, the iPhone app is effectively appearing at 4x size, but using 2x assets.
The observant reader will notice that 320×480 points should be 640×960 retina pixels, not 640×920. What happened to the other 40 pixels (20 points)? Carefully examining the screenshots below you can see that the status bar is still shown at the top of the iPad screen. The iPhone-size app screen is cropped to remove its status bar, but the app still thinks it is there. This can be seen by the top bar being reported as 64 points tall: 20 for the (cropped) status bar and 44 for the (visible) navigation bar.
Other iPad Sizes
When the 12.9" iPad Pro was introduced things changed slightly. It has a much larger 2048×2732 pixel screen. Instead of simulating the 3.5" iPhone size, iPhone-only apps running on the 12.9" iPad Pro behave as if they are running on a 4.7" iPhone (375×667 points). The status bar is still cropped. As before, the actual size the screen is shown uses an integral zoom factor to avoid scaling artefacts: 750×1294 pixels or 1500×2588 pixels.
Then came the 10.5" iPad with its 1668×2224 pixel screen. This is not large enough to show the double size 4.7" iPhone version of the app with integral scaling, so went back to the 3.5" size shown at 640×920 pixels or 1280×1840 pixels. This results in large letterboxing and pillar-boxing.
iOS 12
When iOS 12 arrived many things changed:
- All iPads show the 4.7" iPhone (375×667 points) version.
- The status bar is no longer cropped from the app’s screen, but appears empty. The real status bar remains at the top of the iPad screen.
- The corners of the screen are rounded slightly.
- The 1x/2x zoom button became more prominent and changed to an icon with outward- and inward-facing arrows to hint at expanding and contracting the screen.
- When shown at the larger size, all iPad devices are using non-integral scaling factors which introduces some blurring.
The 11" iPad Pro and 3rd generation 12.9" iPad Pro launched on iOS 12 so there’s no previous behaviour to compare against for those devices.
9.7" iPad Pro Running iOS 12
The actual size on screen is 750×1334 pixels or 1102×1960 pixels. The latter is a 1102 / 375 ≈ 2.94 scaling factor.
10.5" iPad Pro Running iOS 12
The actual size on screen is 750×1134 pixels or 1200×2136 pixels. The latter is a 1200 / 375 = 3.2 scaling factor.
1st and 2nd Generation 12.9" iPad Pro Running iOS 12
The actual size on screen is 750×1334 pixels or 1486×2644 pixels. The latter is a 1486 / 375 ≈ 3.96 scaling factor.
With a height of 2732 pixels, the 1st and 2nd generation 12.9" iPad Pro has enough space to show the 4.7" iPhone (375×667 points) version at four times scale and still have space for the iPad status bar. I suspect Apple deliberately chose to use the same scaling factor as the 3rd generation 12.9" iPad Pro for consistency. The 3rd generation device needs to leave space for the Home Indicator and has a slightly larger iPad status bar and a four times scale doesn’t quite fit.
11" iPad Pro Running iOS 12
The actual size on screen is 750×1134 pixels or 1294×2300 pixels. The latter is a 1294 / 375 ≈ 3.45 scaling factor.
3rd Generation 12.9" iPad Pro Running iOS 12
The actual size on screen is 750×1134 pixels or 1486×2644 pixels. The latter is a 1486 / 375 ≈ 3.96 scaling factor. This is the same as the 1st and 2nd generation 12.9" iPad Pro running iOS 12.
Why Does any of this Matter?
It matters because the 3.5" iPhone 2:3 aspect ratio is hard to design for which can be quite a support burden in a world largely consisting of 9:16 or 9:19.5 aspect ratio iPhones.
It matters because the large black bars around the iPhone-shaped app are ugly, especially prior to iOS 12. A user who paid a lot of money for an 11" or 3rd generation 12.9" iPad Pro with its edge-to-edge screen wants to use apps that make use of all that screen!
It matters because at the larger zoom size, the 4.7" iPhone app screen content is being blurred on iOS 12 on all iPad devices.
Abandoning the 3.5" iPhone Size
The iPhone 4S cannot run iOS 10 so you might think that requiring iOS 10 (or later) would prevent you having to handle that screen size ever again. That isn’t sufficient if your app is iPhone-only because you have to consider the iPad. To never have to worry about the 3.5" iPhone size you need to either:
- create a universal app and require at least iOS 10.
- require at least iOS 12.
Ideally you’ll create universal apps. That can introduce its own issues with the larger canvas and even more sizes and aspect ratios to consider, especially if you support Slide Over and Split Screen multitasking on the iPad.
Other Articles in this Series
- How iPad Apps Adapt to the New 10.2" iPad
- How iPad Apps Adapt to the New 11" and 12.9" iPads Pro
- How iOS Apps Adapt to the iPhone XS Max and iPhone XR Screen Sizes
- How Apps Adapt to the Series 4 Apple Watch Screen Sizes
- How iOS Apps Adapt to the iPhone X Screen Size
Adaptivity iOS App
The screenshots in this article were taken from the iOS simulator running my Adaptivity (C) app which only supports iPhone.
Adaptivity is a tool for developers and designers to visualise the different screen sizes, layout margins, readable content guides, bar heights and Dynamic Type sizes that a modern, adaptive, iOS app uses when running on different devices and iPad multitasking sizes.
Adaptivity (B) has the same functionality as Adaptivity (C) but is a universal app and supports iPad multitasking. The full version, Adaptivity (A), has some extra features such as visualising the Safe Area, an Intent UI Extension, Widget, Watch app and more. Adaptivity (A) and (B) can be run at the same time with Split View or Slide Over iPad multitasking. Additional screenshots and information on all the features is available on my web site.
Other Articles That You Might Like
I have also written about External Display Support on iOS and Working with Multiple Versions of Xcode. You may not have realised that there were iPad Navigation Bar and Toolbar Height Changes in iOS 12. You must certainly have noticed the View Controller Presentation Changes in iOS 13.
If you found any of these articles helpful then please take a look at my apps in the iOS App Store to see if there’s anything that you’d like to download (especially the paid ones 😀). If you work with a lot of Xcode projects you might like my Mac Menu Bar utility XcLauncher.
