iPhone X: The first true @3x device
Well the long rumored iPhone X is officially unveiled and it comes with a laundry list of extremely impressive specs. One of the most interesting things to note though is the new 5.8 inch “Super-Retina” display. It has a screen resolution of 1125px × 2436px. This is a particularly interesting resolution choice since according to Apple’s Human Interface Guidelines it’s an @3x screen with an effective 375 x 812 visual points of screen available.
Basically what this means for user’s is they’ll get the same content they were getting before on an iPhone 6 sized device just with 20% additional screen height and a bump from @2x resolution to @3x.
You may be thinking well what about Apple’s iPhone plus (6+, 6S+, 7+, 8+) line? Those have been “true” @3x devices for years now right? Well not quite. Following Paintcode app’s “Ultimate Guide To iPhone Resolutions” which has been updated to include the new iPhone X the 6 Plus takes a @3x effective resolution than downsamples it to fit the physical pixels on the screen.
What this means for user’s is this is the first device that they will truly see the full visual fidelity of @3x elements on their screens. For developers it means now is as good a time as an any to jump on the @3x support bandwagon. It’s likely you are already providing @2x and @3x versions of your assets though in which case you’re all set for supporting the full display capabilities of the iPhone X.
For flat/simple vector assets its recommended to bring them into Xcode as PDF’s and let Xcode scale these into 1x/2x/3x assets for you. Starting with Xcode 9 this is easier than ever to use since there is a new option to preserve vector data. That means not only can it handle scaling for different devices but your assets can be upsized or downsized without any loss in quality. To take advantage of this new feature you can follow this guide.
The iPhone X represents a significant departure from Apple’s strategy for the last couple of years of delivering iterative improvements with minimal design changes to their flagship device. What are your thoughts on supporting this device in your app’s going forward?