Adapt to various iPhone 12 screen sizes on iOS apps

Tram Ho

Introduce

As we all know, at its event in October 2020, Apple announced four new iPhone models: iPhone 12 mini , iPhone 12 , iPhone 12 Pro and iPhone 12 Pro Max . The iPhone 12 and 12 Pro have identical screen resolutions and work identically. So, only three screen resolutions really need to be considered.

  • iPhone 12 mini 5.4 “with 1080 × 2340 pixels
  • iPhone 12/12 Pro 6.1 “with 1170 × 2532 pixels
  • iPhone 12 Pro Max 6.7 “with 1284 × 2778 pixels

None of these resolutions correspond to existing devices. In this article we compare existing devices, the iPhone SE 2nd generation, 11 Pro, and 11 Pro Max with the new models, and we also look at the Display Zoom feature (introduced by Apple on iOS 14) while comparing them. Let’s get started together !!!!

2nd Gen iPhone SE

The second-generation iPhone SE is the same size and works similarly as the iPhone 6, 6s, 7, and 8.

Standard Zoom

Second-generation iPhone SE has a resolution of 375 × 667 points at native resolution.

Xcode 12.1 build of Adaptivity on 2nd generation iPhone SE running iOS 14.1 in portrait

Xcode 12.1 build of Adaptivity on 2nd generation iPhone SE running iOS 14.1 in landscape

Display Zoom

With Display Zoom enabled, iPhone SE 2nd generation displays the same resolution as the 1st generation iPhone SE magnified to 320 × 568 points. That is the same resolution as iPhone 5 and 5S. However, note that the navigation bar is 112 points high, 1 point taller than the iPhone SE actually used.

Xcode 12.1 build of Adaptivity on 2nd generation iPhone SE running iOS 14.1 in portrait with Display Zoom

Xcode 12.1 build of Adaptivity on 2nd generation iPhone SE running iOS 14.1 in landscape with Display Zoom

iPhone 11 Pro

The iPhone 11 Pro is the same size and function as the iPhone X and XS.

Standard Zoom

iPhone 11 Pro has a resolution of 375 × 812 points at its native resolution.

Xcode 12.1 build of Adaptivity on iPhone 11 Pro running iOS 14.1 in portrait

Xcode 12.1 build of Adaptivity on iPhone 11 Pro running iOS 14.1 in landscape

Display Zoom

With Display Zoom enabled, iPhone 11 Pro is magnified to 320 × 693 points when the app is built with Xcode 12 or higher. This does not correspond to any previous device. Note that both the top and bottom bar are slightly smaller than their original sizes.

Xcode 12.0 build of Adaptivity on iPhone 11 Pro running iOS 14.1 in landscape with Display Zoom

Xcode 12.0 build of Adaptivity on iPhone 11 Pro running iOS 14.1 in portrait with Display Zoom

iPhone 11 Pro does not support Display Zoom on iOS 13. When built with Xcode 11 (ie linked with iOS 13), iPhone 11 Pro with Display Zoom displays iPhone SE 320 × 568 points. This ensures the app doesn’t see a non-existent screen resolution on iOS 13. The app claims that the status bar is 20 points high (like on the 1st generation iPhone SE) but iOS continues to set the time and the metrics. the other at the top of the screen.

Xcode 11.7 build of Adaptivity on iPhone 11 Pro running iOS 14.1 in portrait with Display Zoom

Xcode 11.7 build of Adaptivity on iPhone 11 Pro running iOS 14.1 in landscape with Display Zoom

iPhone 11 Pro Max

The iPhone 11 Pro Max is the same size and functions as the iPhone XS Max. The iPhone 11 and XR have slightly different physical sizes and are only 2x instead of 3x, but have the same point resolution and can be considered functionally equivalent as the iPhone 11 Pro Max.

Standard Zoom

iPhone 11 Pro Max has a resolution of 414 × 896 points at its native resolution. The bar height is the same as on the iPhone 11 Pro.

Xcode 12.1 build of Adaptivity on iPhone 11 Pro Max running iOS 14.1 in portrait

Xcode 12.1 build of Adaptivity on iPhone 11 Pro Max running iOS 14.1 in landscape

Display Zoom

With Display Zoom enabled, iPhone 11 Pro Max will display the resolution of iPhone 11 Pro magnified to 375 × 812 points. Unlike the iPhone 11 Pro, the iPhone 11 Pro Max already supports the Display Zoom feature in iOS 13. Apps built with Xcode 11 will have the same resolution of the iPhone 11 Pro as the built-in apps. Xcode 12. Again, the top and bottom bars are slightly different in size from the actual iPhone 11 Pro. The status bar is 4 points shorter and the bottom bar 3 points shorter, 7 points more vertical content than on the iPhone 11 Pro.

Xcode 12.1 build of Adaptivity on iPhone 11 Pro Max running iOS 14.1 in portrait with Display Zoom

Xcode 12.1 build of Adaptivity on iPhone 11 Pro Max running iOS 14.1 in landscape with Display Zoom

iPhone 12 mini

Standard Zooom

The 1080 × 2340-pixel display would suggest a new resolution of 360 × 780 points, but the iPhone 12 mini actually shows the iPhone 11 Pro’s miniature resolution of 375 × 812 points. This means that the iPhone 12 mini doesn’t introduce a new resolution. However, since the actual physical display in pixels is not an integer multiple of the resolution in points , it always expands. With 3x screens, hopefully they’ll be hard to see. The status bar is 6 points higher than the iPhone 11 Pro. The bottom bar has the same height.

Display Zoom

Since the iPhone 12 mini is working as if it were an iPhone 11 Pro, when the Display Zoom feature is turned on, the iPhone 12 mini will display a magnified resolution of 320 × 693 points when the app is built with Xcode 12.0 and above. The status bar is 5 points higher than the iPhone 11 Pro with Display Zoom. The bottom bar has the same height.

iPhone 12/12 Pro

Standard Zoom

Unlike the iPhone 12 mini, the iPhone 12 and 12 Pro introduce a new resolution of 390×844 points for the native resolution. Apps must be built with Xcode 12.1 onwards in order to see this resolution. On the horizontal side, note that the horizontal size category is compact (just like the iPhone 11 Pro and smaller devices). The status bar is up 3 points from the iPhone 11 Pro. The bottom bar is unchanged.

Display Zoom

With Display Zoom enabled, iPhone 12 and 12 Pro display a magnified resolution of 320 × 693 points when an app is created with Xcode 12.0 or higher. This is the same resolution as iPhone 11 Pro and iPhone 12 mini with Display Zoom. The status bar 1 point higher than the iPhone 11 Pro is equivalent to the Display Zoom feature while the bottom bar is 1 point shorter.

iPhone 12 Pro Max

Standard Zoom

Like iPhone 12 and 12 Pro, iPhone 12 Pro Max introduces a brand new resolution of 428 × 926 native resolution points. Since this is the new resolution, apps must be built with Xcode 12.1 or higher to see them. The Stutus bar is 3 points higher than the iPhone 11 Pro Max. Bottom bar is unchanged.

In landscape, note that the horizontal size category is normal (same as iPhone 11 Pro Max).

Display Zoom

With Display Zoom on, iPhone 12 Pro Max displays the resolution of iPhone 11 Pro magnified to 375 × 812 points. The status bar is 3 points shorter and the bottom bar 4 points shorter, 7 points more vertical content than on the iPhone 11 Pro.

Conclude

Apple gives us great app compatibility with new devices, the iPhone 12 range is no different (except for the iPhone 12 mini, which has always had the reasonable resolution of the minimized iPhone 11 Pro. to fill its screen). The bar height when scaling doesn’t always match the original device, so backwards compatibility isn’t 100% accurate. To see the new resolutions of iPhone 12/12 Pro and 12 Pro Max, apps must be built using Xcode 12.1.

Display Zoom usually displays an enlarged version of the existing device’s smaller resolution. The exception is the iPhone X, XS and 11 Pro sizes that don’t support Display Zoom until iOS 14. They display a new resolution of 320 × 693 points when built with Xcode 12 (i.e. compared to iOS 14) and an alphabetic box of 320 × 568 points when built using Xcode 11.

Through this article we can also see that when building with different Xcode versions, the screen display will be different and when changing the Display Zoom mode is similar, so when developing with devices. We need to pay attention to this so that the interface does not break on the screens.

Articles translated by source:

https://hacknicity.medium.com/how-ios-apps-adapt-to-the-various-iphone-12-screen-sizes-e45c021e1b8b

Share the news now

Source : Viblo