Browse by...
Home Resources Blog

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 < 1 (to our knowledge), it’s essentially a catch-all.

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.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free