What Reference Resolution and Game View Settings Should I Use?

After reading my post here, someone reached out to me for help with their UI settings. So, I thought I would document some of that process, in case it is helpful to others. Ultimately I will answer two questions here, for mobile platforms:

What should I set for my Canvas Scaler Reference Resolution? (1080 x 1440)
&
What resolutions settings should I add to my Game View for testing?

1125 x 2436 (~9:19.5) (iPhone X)
360 x 780 (~9:19.5) (Low Res)

1440 x 2560 (9:16) (Google Pixel XL & Many Others)
1080 x 1920 (9:16) (iPhone Plus)
750 x 1334 (~9:16) (iPhone)
414 x 736 (9:16) (Common Mobile Resolution, Low Res)
360 x 640 (9:16) (Common Mobile Resolution, Low Res)

1050 x 1680 (10:16)

2048 x 2732 (~3:4) (iPad Pro 12.9")
1668 x 2224 (3:4) (iPad Pro 10.5")
1536 x 2048 (3:4) (iPad Pro 9.7"/Air2/Mini4)

If you would like to know why these are my answers, then please read on, and let me know what you think!

WARNING! This entire guide was made to help someone developing for a PORTRAIT ORIENTATION! Everything here is also true for landscape orientation, just make sure to flip everything in your mind. i.e. 9:16 = 16:9, 1080x1920 = 1920x1080. When we talk about the screen width being our locked axis in portrait, rotate that phone! Height is our locked/important axis for landscape orientation!

Also, if you don't read the other post, TL;DR, Canvas Scaler Screen Match Mode = Match Width for Portrait, Match Height for Landscape.

 

First of all, we should look at the real world, and understand what devices users might be using to run our game. Here are some quick Google search results sorted, supposedly, by popularity / market share, except the iOS device list.

https://developer.apple.com/library...iOSDeviceCompatibility/Displays/Displays.html
iPhone X 1125 x 2436
iPhone 8 Plus 1080 x 1920
iPhone 8 750 x 1334
iPhone 7 Plus 1080 x 1920
iPhone 6s Plus 1080 x 1920
iPhone 6 Plus 1080 x 1920
iPhone 7 750 x 1334
iPhone 6s 750 x 1334
iPhone 6 750 x 1334
iPhone SE 640 x 1136
iPad Pro 12.9-inch (2nd generation) 2048 x 2732
iPad Pro 10.5-inch 2224 x 1668
iPad Pro (12.9-inch) 2048 x 2732
iPad Pro (9.7-inch) 1536 x 2048
iPad Air 2 1536 x 2048
iPad Mini 4 1536 x 2048

https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide
360 x 640 11.26%
414 x 896 7.84%
375 x 667 6.02%
360 x 780 5.94%
360 x 760 5.13%
375 x 812 5.02%
412 x 892 3.55%
360 x 720 3.47%
393 x 851 3.24%
414 x 736 2.88%
412 x 869 2.88%
412 x 846 2.53%
360 x 740 2.26%

https://deviceatlas.com/blog/most-used-smartphone-screen-resolutions
1080 x 1920 19.59%
750 x 1334 15.67%
720 x 1280 14.39%
1440 x 2960 8.85%
1440 x 2560 5.89%
1125 x 2436 4.6%
640 x 1136 3.84%
1080 x 2160 3.51%
540 x 960 2.74%
720 x 1440 2.25%

https://w3codemasters.in/most-common-screen-resolutions/
360 × 640 21.9%
1366 × 768 11.67%
1920 × 1080 8.41%
375 × 667 4.92%
1440 × 900 2.96%
768 × 1024 2.49%
1600 × 900 2.37%
1280 × 800 2.26%
414 × 736 2.25%
1536 × 864 2.2%
720 × 1280 2.03%
1024 × 768 1.84%
320 × 568 1.8%
1280 × 1024 1.72%
320 × 570 1.55%
412 × 732 1.43%
320 × 534 1.42%
360 × 720 1.39%
1280 × 720 1.38%
1680 × 1050 1.17%

 

Now, lets break that raw data down into aspect ratios to see what we learn.

Legend:

Taller (Smaller Number)
9 / 19.488 = 0.462 (iPhone X)
9 / 16 = 0.5625
10 / 16 = 0.625
2 / 3 = 0.666
3 / 4 = 0.75
4 / 5 = 0.8
Shorter (Bigger Number)

~ Rounded Number

https://developer.apple.com/library...iOSDeviceCompatibility/Displays/Displays.html
iPhone X 1125 x 2436 ~0.462
iPhone 6/7/8 Plus 1080 x 1920 0.5625
iPhone 6/7/8 750 x 1334 ~0.5622
iPhone SE 640 x 1136 ~0.5634

iPad Pro 12.9" 2048 x 2732 ~0.75
iPad Pro 10.5" 1668 x 2224 0.75
iPad Pro 9.7"/Air2/Mini4 1536 x 2048 0.75

https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide
360 x 640 0.5625
414 x 896 ~0.462
375 x 667 ~0.562
360 x 780 ~0.462
360 x 760 ~0.474
375 x 812 ~0.462
412 x 892 ~0.462
360 x 720 0.5
393 x 851 ~0.462
414 x 736 0.5625
412 x 869 ~0.474
412 x 846 ~0.487
360 x 740 ~0.486

https://deviceatlas.com/blog/most-used-smartphone-screen-resolutions
1080 x 1920 0.5625
750 x 1334 ~0.562
720 x 1280 0.5625
1440 x 2960 ~0.486
1440 x 2560 0.5625
1125 x 2436 ~0.462
640 x 1136 ~0.563
1080 x 2160 0.5
540 x 960 0.5625
720 x 1440 0.5

https://w3codemasters.in/most-common-screen-resolutions/
360 × 640 0.5625
768 × 1366 ~0.562
1080 x 1920 0.5625
375 × 667 ~0.562
900 x 1440 0.625
768 × 1024 0.75
900 x 1600 0.5625
800 x 1280 0.625
414 × 736 0.5625
864 x 1536 0.5625
720 × 1280 0.5625
320 × 568 ~0.563
1024 x 1280 0.8 <- This is a computer monitor resolution.
320 × 570 ~0.561
412 × 732 ~0.563
320 × 534 ~0.6
360 × 720 0.5
1050 x 1680 0.625


What do we notice? Well, these are essentially the only aspect ratios we need to worry about. Even 10:16 is really just a computer monitor resolution that slipped in there, but we'll keep it just because it's between 3:4 and 9:16.

~0.462 - 9:19.488 - iPhone X (Tallest)
0.5625 - 9:16 (Most Common)
0.625 - 10:16 (Noteworthy)
0.8 - 3:4 - iPads (Shortest)

Right away I would say that these are essential Game View Settings:

1125 x 2436 (iPhone X)
9:16
10:16
3:4

 

Can we clean up some of this raw data? It's too much!

9:19.488
--------
1125 x 2436 (iPhone X)
414 x 896
412 x 892
393 x 851
375 x 812
360 x 780

9:16
----
1440 x 2560 (Google Pixel XL & Many Others)
1080 x 1920 (iPhone Plus)
900 x 1600
864 x 1536
768 × 1366
750 x 1334 (iPhone)
720 x 1280
640 x 1136
540 x 960
414 x 736 (Common Mobile Resolution)
412 × 732
375 x 667
360 x 640 (Common Mobile Resolution)
320 × 570
320 × 568

10:16
-----
1050 x 1680
800 x 1280
900 x 1440

3:4 (iPads)
---
2048 x 2732
1668 x 2224
1536 x 2048

 

Okay, so, what Reference Resolution?!

Shortest aspect ratio (iPad/3:4), but with a pixel value on the locked axis that is near to our other important pixel resolutions (phones):
(Height = desired reference width * 1.333)

1080 x 1440 <-(This one IMHO) (Common 9:16 reference width, medium res.)
1125 x 1500 (iPhone X reference width.)
1440 x 1920 (Pixel XL reference width.)


What Game View Settings?

9:19.488
1125 x 2436 (~9:19.5) (iPhone X)
360 x 780 (~9:19.5) (Low Res)

9:16
1440 x 2560 (9:16) (Google Pixel XL & Many Others)
1080 x 1920 (9:16) (iPhone Plus) (9:16 Version of Reference Resolution)
750 x 1334 (~9:16) (iPhone)
414 x 736 (9:16) (Common Mobile Resolution, Low Res)
360 x 640 (9:16) (Common Mobile Resolution, Low Res)

10:16
1050 x 1680 (10:16)

3:4
2048 x 2732 (~3:4) (iPad Pro 12.9")
1668 x 2224 (3:4) (iPad Pro 10.5")
1536 x 2048 (3:4) (iPad Pro 9.7"/Air2/Mini4)
1080 x 1440 (3:4) (Reference Resolution)

 

I hope that helps! Let me know what you think.

 

Thank you! I had hoped at least one person would find it useful! Thank you for your great tips! Please repurpose and spread this info around however you like. If it can help someone make their game better, that makes me happy.

 

Hi,
Thanks for the sum-up. But I want to mention that there is narrower screen than 9:19.5. I just discovered that there is some 9:20 phone and even 9.21. 9:21 is for ultra wide video and it did not manage to breakthrough the market, but 9:20 is very likely to become a common ratio. Therefore I would recommend to always test it and to make your UI work in it.
(A few phones from 2021 are having this spec: https://www.gsmscore.com/model-finder/aspect-ratio/20-9/)

I would not discard them and ignore them because they have a low market share today. It will change.

I would always take a middle common point to create the UI (9:16) and then test the extreme ratio like 3:4 and 9:20..
Actually, I'm not even sure if 9:16 for mobile in three years will still be relevant if you target high ends phones.