Time to time, there are always new devices and new OS versions rolled out. Nowadays most new mobile devices have full HD resolutions, like the TV in our home or our PC display. A while ago, when mobile displays had smaller screens with less pixels, it was easy to separate them from desktop devices. These days it is getting much more difficult.
In web browsers the fundamental basics of media queries are usually present, meanwhile not all email clients support media queries. In addition there are tons of other unsupported features in many email clients, which make the field of email coding literally a “minefield”.
We need to keep our knowledge up-to-date, and figure out how can we target different devices properly. At EDMdesigner, we are working hard every day to make the life of email HTML coders easier, so we are researching new approaches week by week in-house.
We came up with the following media queries, which can help all email coders to identify different devices and OS versions.
Please note, that this is an EXPERIMENTAL blog post, and the below mentioned assumptions have only been tested with Litmus and Email on Acid.
Android devices
Actually it is very hard to target different Android devices right now. There are more than a thousand different combinations of screen size and resolution, and these combinations sometimes match with with non-Android devices as well.
Old and small screen Android devices
<code style="font-size: 12px;"> @media only screen and (-webkit-device-pixel-ratio:.75),<br></br>
screen and (-webkit-device-pixel-ratio:1) and (orientation: portrait) and (max-device-width: 600px),<br></br>
screen and (-webkit-device-pixel-ratio:1.5) and (orientation: portrait){<br></br>
/* styles */<br></br>
}```
### Some year old Android devices (between 4.0 and 4.3)
@media (?????don't know?????) {
/* styles */
}
```
High resolution and 4.4+ Androids
<code style="font-size: 12px;">@media only screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: 1dpi) {<br></br>
/* styles */<br></br>
}```
As you can see, we cannot cover the whole Android nation, but we won’t give up the fight. If you have any tips or solution, please post a comment below!
## iOS devices
There are tons of existing resources for targeting iOS with media queries, but most of them are not up to date, or do not really care about email HTML. So below you can find our best targeting method, which seems to be ‘bulletproof’ and can help you group all iOS devices into one group.
### All iOS devices (iPhones, iPads)
@media screen and (min-width: 320px) and (max-width: 600px) and (device-aspect-ratio: 40/71),
screen and (min-width: 320px) and (max-width: 600px) and (device-aspect-ratio: 2/3),
screen and (min-device-width : 768px) and (max-device-width : 1024px) and (device-aspect-ratio: 3/4) {
/* styles */
}
```
As we mentioned before, these findings are part of our current research, and need more testing.
So if you find a bug or you want to share your findings with us, please post a comment below or shoot us an email any time!
Updated: there was a mistake in the “all iOS” media query. Fixed.
