How can I find the 'safe region' for iPhone size if I am creating my app using iPad size?

Question

I am creating a game and want to use the iPad size settings (landscape: 1024x768). From what I've learnt, using the iPad settings will crop out part of the height only on an iPhone. Say I have a 2048x1536 background image for iPad (1024x768) and a 2208x1242 image for iPhone 6+ (736x414),

i. how can I determine the 'safe region' from the iPad that will appear on the iPhone 6+ both point and pixel wise?

ii. will the 'safe region' for the iPhone 6+ be the same as the iPhone 6 (667x375) with a 1334x750 image? If not, how can it also be determined both point and pixel wise?

Answer 1

I assume you wish to create a universal game that runs both on iPad and iPhone. If that's the case, there are two possible approaches when defining your graphics assets in the Attributes Inspector (far right on your Xcode interface while Assets.xcassets is selected). In the Devices section, you can select among Universal, iPhone, iPad, Apple Watch, Apple TV, Mac and any combination of those.

1. If you select "Universal" only, then you will have to make sure that the assets you insert there will look good both on iPhone and iPad. If that's the case, see below some hints of how to make your assets safe for using universally.

2. If you select "iPad" and "iPhone", you will have to include separate assets for iPad and iPhone, with their appropriate resolutions and aspect ratios. In my past experience, I've always headed this way. For the iPad (1x) you will have to provide a 1024x768 background, for the iPad (2x) you will have to provide a 2048x1536, unless you choose "Single Scale" and use a single vector PDF file. Respectively, for the iPhone, you will have to provide a 480x320 (1x, only in case you need to support old devices such as iPhone 3G/3GS, quite unlikely given the fact Sprite-Kit was introduced with iOS7), then 1334x750 (2x), and 2208x1242 (3x, for the iPhone 6+, 6S+, 7+). With this approach you don't need to worry about "safe" zones, as the graphics you supply will be used on each device properly with no "cutting" off the edge. Just bear in mind that iPhone 4S and iPhone 5/5S/SE would need some background scaling in order to fit the whole 2x picture on the screen. Otherwise it would look zoomed in.

If you go with the first approach, then you should consider the following information in order to make your "universal" graphics safe for use with all devices: iPhone 5/5S/SE...and all newer have a 16:9 display aspect ratio. iPhone 4S has 3:2 aspect ratio (you only worry about that if your game will support iOS 9). iPad screen aspect ratio is 4:3.

With the above in mind, there are two paths you could go: 1. Use 16:9 universal assets that will have their left/right parts cut off on iPad and iPhone 4S. 2. Use 4:3 universal assets that will have their upper/lower parts cut off on iPhones.

The above applies to your 2x assets as these will be used for both retina iPads and retina iPhones (4S, 5/5S, SE, 6/6S/7).

1x assets will only be used for non-retina iPads (iPad 2 in case you would support iOS 9, otherwise skip these too).

3x assets will only be used for the "Plus" iPhone models. So I suggest you provide these in 16:9 ratio (2208x1242) only.

So, how do you calculate your "safe" zones. Pretty straightforward:

Case 1 (16:9 assets to be used for iPad too): height 1536 (this is the retina iPad height in pixels, although if you wish to be pixel-perfect on iPad Pro 12.9" then you should increase that to 2048), width = 1536 * 16 / 9 = 2732 pixels wide (3640 pixels for iPad Pro support). Note that you will have to scale it down in run-time in order to fit for the iPhones. In order to avoid cutting off important content from your background, don't put anything to the left or right of the middle 2048 pixels of the 2732x1536 universal image (342 pixel "danger" zones on the left and right). If you go with a 3640x2048 image (supporting iPad Pro 12.9"), then only use the middle 2732 pixels, leaving only unimportant stuff in the 454-pixel-wide left and right boundaries.

Case 1b (same as above but with a smaller image): Another approach would be to use a native (iPhone 6/6S/7) 1334/750 pixels image, but then you will have to scale up for iPads, and scale down for iPhone 4S/5/5S/SE. In this case, your "safe" zone is 1000x750 (visible both on 4:3 iPads and 16:9 iPhones).

Case 2 (4:3 assets to be used for iPhones too): For the 2x assets use 2048x1536 pixel images. Depending on how you position the sprite on the screen there will be loses on the upper and/or lower parts. If it's centered, then your "safe" zone is 2048 / 16 * 9 = 1152, which leads to 2048x1152 in the middle of the 2048x1536 asset.

If you need any further clarification I will be happy to elaborate.