When considering support for your mobile app the sheer number of different screen resolutions you need to support can be mind boggling. However, if you see a simple screen ratio image like the one I’ve created here you’ll be relieved to know you really only need to consider a four or five screen sizes and then simply aim to design your app or game screen to fit in a 2133×1440 area! I know that sounds like an odd resolution, in fact you best keep to perhaps make it 2132×1440. Using scaling and a “design resolution”, having assets made for your highest resolution and then scaling down seems to be the way to go. I’m not going into that here though, there are plenty of other places to read peoples views on that. Here is a handy 2560×1600 Photoshop PSD file for you to download and play with:
So What Can I Learn From This
If you are aiming to support all screen ratios, from iPad 3:2 (three by two) screens upto wide screeen 16:10 Android Tablets, then you could learn from the guide that the 2133×1440 area will be shown on all devices, the various coloured boarders will be off screen depending on the device. So if you are say displaying a scrolling platform game, some players will see more horizontally and some will see more vertically.
Supporting Lower Design Resolutions
So you might not want to design your graphics for a resolution of 2560×1600, simply divide down the values. For say a 1280×800 res you simply need to divide by 2. You will find the “Safe Area” is now 1066×720. For say 800×500 res (2560/800=3.2) divide by 3.2. You will find the “Safe Area” is now 668×450.
Related Useful Links
This work by Gavin M Thornton is licensed under a Creative Commons Attribution 4.0 International License.
Based on a work at https://www.gmtdev.com/blog/2014/08/31/visual-guide-to-on-screen-safe-areas-multi-resolution-support-template/.