I put this little chart together while trying to understand Retina displays. It helps to see the different sizes of displays. Honestly, I want to do as little work as possible to support as many displays sizes as possible. This helps me target a sweet spot to be “good enough” on most devices. Right now I’m targeting an iPhone 8+, as more X phones come to market I will have to account for the extra height.
/* iphone device resolutions device landscape pixel touch device points ratio ratio ratio pixels target ppi Xs Max 414x896 0.4621 2.1643 x3 = 1242x2688 132x132 458 Xr 414x896 0.4621 2.1643 x2 = 828x1792 88x88 326 X,Xs 375x812 0.4618 2.1653 x3 = 1125x2436 132x132 458 8+ 414x736 0.5625 1.7778 x3 = 1242x2208 132x132 401 8 375x667 0.5622 1.7787 x2 = 750x1334 88x88 326 5,SE 320x568 0.5634 1.775 x2 = 640x1136 88x88 326 ipad mini 768x1024 0.75 1.3333 x2 = 1536x2048 88x88 326 ipad 0.75 1536x2048 ipad pro 10.5 0.75 1668x2224 264 ipad pro 12.9 0.75 2048x2732 264 source: https: //www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions */
Apple Human Interface Guidelines
Provide ample touch targets for interactive elements. Try to maintain a minimum tappable area of 44pt x 44pt for all controls.
This explains all the work I had to do to resize my buttons and icons once I went to Retina. The 44×44 icons were way to small on these new screens. I will now make all future buttons at 132×132 and size down as needed. Emanuele does a good job explaining this in his new book, which I recommend, it has taught me a lot as I get started with Phaser 3.
Apple Human Interface Guidelines (iOS Screens and Resolutions)