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.

Author
Gergely Mecs

Gergely Mecs

Chief Frontend Developer @ EDMdesigner.com

  • Beginner's Guide to Using Sass in Email Coding Beginner's Guide to Using Sass in Email Coding

    Do you repeat bits of CSS code across email template projects? Learn to use the Sass preprocessor language to change that and design reusable components.

    Read more
  • Open Source Email HTML Modification Tools for Email Developers Open Source Email HTML Modification Tools for Email Developers

    Grab these free & open-source HTML code modification tools created by EDMdesigner specifically for email coders.

    Read more
  • Managing Full-time Employees at a Growing SaaS Company Managing Full-time Employees at a Growing SaaS Company

    In this article you can read about how an early-stage startup can overcome management difficulties with the SCRUM methodology and the pomodoro technique.

    Read more