The other week, we reported that Yahoo! Mail had fixed a bug which caused stylesheets within media queries to be take precedence over any other CSS. But just when we thought this was well behind us, we found that the Windows 8 Mail app incorrectly resolves media queries… And won’t be deterred by lousy attribute selectors.

While the Mail app that comes bundled with Windows 8 is a fairly fringe email client, having the ‘mobile version’ of an email display unintentionally was enough to warrant a forum thread and a couple of support tickets in fairly short order. Thankfully, there is a simple workaround, but it comes with a few quirks of its own.

Take a walk on the WebKit side

It’s no news to any of us that a lack of media query support outside of the default iOS and Android Mail clients is what’s cramping the style of many an email designer. That said, the vast majority of opens originating from a mobile device are likely to come from WebKit-powered clients like the earlier two… Unless you’re lucky enough to have an over-zealous client who is hung up on their ancient BlackBerry.

We mention this because the workaround to having media queries resolve incorrectly in Windows 8 Mail is to ensure only WebKit clients use them. This may raise hackles amongst the two fellows on your subscriber list using Windows Phone 7.5, but it may be a risk you’re willing to take.

Now, onto the code. There isn’t much to be done – simply replace/append your existing media query expression with and (-webkit-min-device-pixel-ratio: 1). For example:

@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) { … }

In short, the -webkit-min-device-pixel-ratio CSS property evaluates the display resolution on WebKit-powered mobile devices. As nothing has a device pixel ratio of

But wait, we haven’t forgotten your over-zealous client here – now that BlackBerry Z10’s email client uses WebKit, he or she will be able to test your responsive email designs, too.

A big thanks to everyone who brought this to our attention so diligently. We love tips like this, so if you’ve seen something unusual in your email newsletter tests, be a good sport and let us know.

  • Chris LaChance

    Awesome guys. Thanks!

  • Kevin Freisen

    I know there arent many devices (if at all) that use the -moz/-o vendor prefixes (and I haven’t tested that this would still work), but would it be worth it to add:

    min–moz-device-pixel-ratio: 1 and -o-min-device-pixel-ratio: 1

    Not sure what the actual syntax for opera is (since they have the crazy fraction notation instead of decimal).

  • Ros Hodgekiss

    Kevin, in this case, we’re just trying to scare off Windows 8 Mail, so -moz will suffice. However, if you want to only have the @media expression evaluated by -o or -moz only, what you suggested is the route you’d take :)

  • Matt

    Is there a way to do this and still allow the client to use the editor feature?

    Many Thanks.

  • Ros Hodgekiss

    Hi Matt, if I’ve understood correctly, you should be able to update your client’s email templates, then have your clients still use the templates via the email editor. The template builder is a different story – once you’ve updated a template in this manner, then they won’t be able to use the builder to change themes, the header etc. Does this answer your question?

  • __tx

    I hope this will work well. I’ll get back tomorrow on this one, I won’t be able to test it till I get my hands on ie 9. Everything almost went well but fails on outlook.com.

  • Jade

    (max-device-width) doesn’t seem to work on the default Samsung Galaxy S4, only max-width seems to work, which then brings us back to the problem with outlook.com. Do you have any other options i can try?

  • Ros Hodgekiss

    Hi Jade and tx, you might want to try the following:

    @media screen and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 1) &#123 … &#125

    Using -webkit-min-device-pixel-ratio will ensure that only WebKit devices are targeted (which may have consequences, but worth testing). Let us know how you go!

  • Amy

    Add this meta tag to the head of your email document: http://cl.ly/image/1P333A1E0C13

    MAGIC! Windows 8 now correctly supports media queries.

  • Ros Hodgekiss

    Hi there Amy, fantastic find! Sorry, our comments awkwardly truncate code, so I added an image above. For the benefit of others reading this, you can find background info (and caveats) in this thread our forums: media query support on Windows Phone 8

    Given this is still a bit of a workaround, we won’t be updating our CSS support guide – but we’ll keep a keen eye open to see if things improve in the future.

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free