While Apple calls iOS 10 their biggest release ever, most of the new features are consumer-facing, like Widgets, Siri/Messages integration, and expanded notifications.
For designers, the only noticeable design changes are bolder titles and bigger use of cards, as seen in native apps like Music and News. Whereas iOS 7 started with a widespread use of thin fonts, iOS 10 is going back to using bolder texts.
A major component of responsive design is creating the right experience for the right device. With a gazillion different devices on the market, this can be a tall task. We’ve rounded up media queries that can be used to target designs for many standard and popular devices that is certainly worth a read.
iPhone Screen Measurements
There are a few different values to consider when looking at the iPhone screen sizes. I’m going to get these values defined here so the chart below makes more sense:
iPhone Display Size (inches) – This is diagonal measure of the screen, from corner to corner, just like you’d measure a TV.
iPhone Rendered Pixels – This is the full number of pixels that are being rendered. This is the value you get when you apply the multiplier (1x, 2x, 3x) the device uses to the screen size in points. If you’re creating an image and want it at the max resolution, this is the size you’d use. I’ve also written an article on Retina images if you’d like to learn more.
iPhone Physical Pixels – This is the actual screen’s pixel resolution. The iPhone 6 Plus is using a a larger image resolution on a screen with a smaller number of physical pixels, so it needs to be downsampled to this size. This value is really only important in a specifications perspective, but shouldn’t really affect your designs.