Tips for Targeting Emails for iPhone 6 With Media Query

Yesterday Apple announced the new iPhone 6 and the big brother the iPhone 6 plus. These new devices can easily be game changers for email developers.

A while ago the iPhones had unique aspect ratios. First generations had 3:2 screen sizes with 480 x 320 px or 960 x 640 px. Changes came with iPhone 5, the new resolution was 1136x640px, and the new aspect ratio is 71/40, that is very close to the 16:9.

Now the new iPhone uses the standard 16:9 ratio. The iPhone 6 has a resolution of 1334x750px, while the 6 plus 1920×1080. It makes it even harder to target your email campaigns properly.

The 326ppi is almost a unique parameter of Apple retina displays – but one of Motorola’s phone has the same pixel ratio. Actually iOS 7 native email client does not really respond to dpi or ppi based resolution media queries. Maybe the new iOS 8 will have better support for dpi/ppi based queries, but than when older iPhones will update, who knows if we will have the option to target differently with this option or not.

Actually the only way to target through pixel density is the -webkit-min-device-pixel-ratio property, but most of the Androids and other webkit based software use, the same 1, 2 or 3 value so this is also not really precise.

The guys at Campaign Monitor had very fast reactions, and already posted a possible solution for targeting the iPhone 6.

In our tests we usually use the min-width, max-width, and device-aspect-ratio combination. For iPads also, if its needed you could add -webkit-min-device-pixel-ratio. (We use to differentiate the non-retinas and retinas.)

So lot of things can change with the new iPhone. We are very excited. What about you?