Unanswered

Dealing with IOS Screen sizes and ratios of height vs width differences?

(1) Share

Report

Posted on by BrianHFASPS

720

I am curious how people deal with the difference screen sizes ratios on IOS devices. I have often been lucky to build to a specific platform of similar iPads. However now I am building toward both iPad and current iPhones which are wildly different in ratio of height to width so it doesn't easy scale well. Do I just leave black bars or let scale and skew? Ideally my app would just grow a gallery I am building to be taller to fill the space but I don't know if you can do that? In case anyone was wondering here is the screen size, resolution and ratios of various devices. I know android is worse but I don't have to worry about that thankfully.

Screen Size	Resolution	Ratio	Decimal
3.5"	480x320	3:2	1.50
3.5"	960x640	3:2	1.50
4"	1136x640	71:40	1.78
4.7"	1334x750	667:375	1.78
5.5"	1920x1080	16:9	1.78
5.8"	2436x1125	812:375	2.17
6.1"	1792x828	448:207	2.16
6.5"	2688x1242	448:207	2.16
7.9"	1024x768	4:3	1.33
7.9"	2048x1536	4:3	1.33
9.7"	1024x768	4:3	1.33
9.7"	2048x1536	4:3	1.33
10.2"	2160x1620	4:3	1.33
10.5"	2224x1668	4:3	1.33
11"	2388x1668	199:139	1.43
12.9"	2732x2048	683:512	1.33

Categories:

Building Power Apps

I have the same question (0)

All responses (3)

Answers (0)

iAm_ManCat 18,256 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

Tagging in our resident responsive guru @KickingApps - their responsive design template can be found in the Community App Samples here: Click Me

The idea being that yes, you can have the gallery or items scale responsively depending on the screen size, no matter the ratio, as you asked, it just takes a bit of work to get it to do that 🙂

Cheers,

Sancho

Was this reply helpful? Yes No
KickingApps 628 on at

Like (1)

Report
Copy link

Link copied!

@iAm_ManCat - thanks for the mention.
@BrianHFASPS - I set up a fluid grid reference within an app that is designed to be fully responsive. I start with mobile layout and expand from there. In your case, because it sounds like you are only designing for mobile or tablet, I’m wondering if you should simply design the screens separately rather than making 1 screen responsive. Would you like to connect via Teams to look at your scenario?

Was this reply helpful? Yes No
BrianHFASPS 720 on at

Like (0)

Report
Copy link

Link copied!

Thanks so much for the offer of help. At the moment I am a little overwhelmed learning to be a zoom video producer for an online graduation. I have had to but this project on hold for the short term.

Was this reply helpful? Yes No