A first important remark : the techniques listed here aren’t universally supported by all mobile email clients.
As you may know, not all email clients were made equal - even on the same device, how an HTML email displays can vary radically from inbox to inbox.
For example, while the default Android email client that appears on the Google Nexus is renowned for its superior CSS support, the Gmail client that also comes shipped with the handset ignores styles within the tags and can’t make head or tail of many run-of-the-mill CSS2 properties.
While the iPhone and other Apple iOS devices can not only boast of near trouble-free email rendering, but also account for a large percentage of mobile email opens, too.
With this in mind, we present to you a non-exhaustive list of mobile email clients and their support for media queries.
Default device email clients
Client | Media Query Support |
Amazon Kindle Fire | Yes |
Amazon Kindle Fire HD | Yes |
Android 2.1 Eclair | No |
Android 2.2+ | Yes |
Android 4.3 | No ( media query issues ) |
Apple iPhone | Yes |
Apple iPad | Yes |
Apple iPod Touch | Yes |
BlackBerry OS 5 | No |
BlackBerry OS 6+ | Yes |
BlackBerry Playbook | Yes |
Microsoft Windows Mobile 6.1 | No |
Microsoft Windows Phone 7 | No |
Microsoft Windows Phone 7.5 | No |
Microsoft Windows Phone 8 | No |
Microsoft Surface | No |
Palm Web OS 4.5 | Yes |
Samsung Galaxy S3+ | No |
3rd-party email clients
Client | Media Query Support |
Microsoft Outlook Exchange 3rd party app (Android) | No |
Gmail mobile app (all platforms) | No |
Yahoo! Mail mobile app (all platforms) | No |
Media queries are needed to allow your email to adapt to the device on which the email is opened.