What Reference Resolution and Game View Settings Should I Use?

Unity Engine
1

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. :wink: 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.

13 Likes
2

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.

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

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%

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%

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%

6 Likes
3

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

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

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

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

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

7 Likes
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

4 Likes
5

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)

7 Likes
6

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

4 Likes
7

Great write-up!

I’d like to add that the device simulator package can be really useful for previewing the game on different mobile devices.

edit: Also don’t forget to set up the editing environment for UI prefabs. The “default scene” used for this won’t have the proper canvas scaler configuration otherwise.

4 Likes
8

Thank you! I had hoped at least one person would find it useful! :smile: 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.

7 Likes
9

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.

3 Likes
10

Here is my game resolution and and reference resolution works almost well on every device in simulator

9826572--1412733--upload_2024-5-10_16-41-15.jpg
9826572--1412733--upload_2024-5-10_16-41-15.jpg1920×611 317 KB

11

Thanks for this write up!

How did you get this formula?
(Height = desired reference width * 1.333)
I couldn’t follow how that came out of the iPad resolution.

Also, I was using an aspect ratio calculator and fed it all of the most common screen sizes, looked for patterns to make a “close enough” list of ratios to test for and came up with this list of test resolutions:
.45:1 - 9:20
.46:1 - 6:13
.56:1 - 9:16
(converted from decimals because Unity doesn’t allow decimals in the aspect ratios for the Game view)

1 Like
12

So, I am using a 4:3 ratio (landscape), or 3:4 (portrait) as your reference ratio because it’s the most narrow you expect to realistically support. And, again my reasoning for that is that it’s better to design for the smallest aspect ratio where everything is pushed together, and then worst case scenario, everything just spaces out on wider/taller ratio screens. In my humble opinion that’s better than designing for a tall/wide layout, and then everything runs together and overlaps on a shorter/narrow screen if something is wrong. And of course that’s just to prevent worst case / UI bugs, we use anchors along that axis to stretch out elements if desired, not just space out. If we have our desired reference width (because we are designing a portrait layout with screen match mode set to 100% match width), let’s say we’ll use 1080 as the reference “pixels” (really just virtual pixels at design time, scaled to device at runtime.) So, we want to decide what the virtual pixel reference height would be for a 3:4 aspect ratio.

So, we have 3/4 = 1080/x and we want to solve for x. We multiply both sides by x to get 0.75(x) = 1080. Then we divide both sides by 0.75 to get x = 1440. Or, basically any reference width divided by 3/4 or 0.75 gives us the other half of the reference resolution for our minimum supported aspect ratio. So, if we divide 1 / 0.75 we get 1.333 repeating. But, that answer is a bit backwards for your question. We could do the same kind of equation like this to get the same answer 4/3 = x/1080. 4/3 = 1.3333 repeating. So, any chosen reference width (for portrrait orientation) multiplied by 1.3333 gives us the matching reference height for a 3:4 ratio. You just have to figure out that number based on your most narrow supported aspect ratio (which technically could be 4:5, not 3:4, in which case the scalar would be 1.25 of your chosen reference width, not 1.333).

13

SteamDeck LCD (up to 60fps)
SteamDeck OLED (up to 90fps)

Native Resolution 1280x800 (16:10)
HDMI Resolution 1280x720 (16:9 HD)

HDMI could be other resolutions but that’s the default and expected for consoles.

In my experience, don’t try to set resolution until at least Time.frameCount >= 2 on startup, or Unity Windows sometimes returns 800x1280 due to some quirk of the portrait hardware filtering through Proton compatibility. Unity Linux builds don’t seem to have the same problem.