Windows Phone 8 has FULL CSS3/Media Query Support!!!

As an avid Windows Phone user, I feel obliged to share this simple fix that turns Windows Phone into one of the best mail app experiences.

All this time I thought Microsoft had taken a huge step backwards, but it turns out they are just idiots.

The reason? They strip out the most important line of code in the document!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

What happens when you don't specify the !DOCTYPE in Internet Explorer? It renders in QUIRKS MODE.

Turns out that simply adding one meta tag to the head is all that's needed to fix this fundamental problem.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Voila! You now have the full power of IE10 at your disposal:
- border-radius
- text-shadow
- gradients
- flexbox
- transitions
- animations
- media queries
- etc.

About the only thing that doesn't appear to work at first glance is the checkbox hack. I'm not sure whether external stylesheets work either.

Happy coding!

jimmenycricket jimmenycricket, 1 year ago

doesn't work for me sir


Get in touch for any freelance work!
zerocents zerocents, 1 year ago

Hi jimmeny, could you try the following?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>test</title>
<style type="text/css">

@media only screen and (max-width: 320px) {
    .mobile-show {
        display: block !important;
        max-height: none !important;
    }
    .mobile-hide {
        display: none !important;
    }
}

</style>
</head>

<body>

<div class="mobile-show" style="display: none; max-height: 0; overflow: hidden; mso-hide: all">Media query enabled</div>
<div class="mobile-hide">Media query disabled</div>

</body>
</html>

This should show "Media query enabled" in portrait view and "Media query disabled" in landscape.

Tested working on a Nokia Lumia 920 from both outlook.com and gmail accounts. This won't work if using an Outlook exchange server.


Michael Muscat
wilbertheinen wilbertheinen, 1 year ago

Nice one! Works for me on a Nokia Lumia 925.


Create a Clang!
jmwhite, 1 year ago

Wow this is an interesting find! I'm also a user of Windows Phone (Nokia Lumia 925) and was recently looking to better support Windows Phone in our future email campaigns.

I'm certainly going to investigate this, thanks for the tip.

Edit:

I can confirm that adding:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

In the <head> does indeed make Media Queries work!

The bad news as stated, this won't work when the email is received via an Exchange account. I tested this by sending a test to my Work Email (Exchange) and Personal Email (IMAP), and only my personal email via IMAP rendered the media query.

I've heard of this problem before. Exchange Server (Regardless of device) seems to mess with media queries. I'm not sure if it straight removes them, or if there is a domain policy that's at work here, but evidence that it can happen on multiple mobile platforms below:

http://stackoverflow.com/questions/7668553/android-email-css-media-queries-outlook-exchange

I'm also wondering if there are any ill effects of this meta tag in the <head> being exposed to all other clients? As its an IE specific related tag I'm guessing it scope is limited, hence no risk?

I don't think any conditional for WP8 exists, I remember there was one for IEMobile 7 a while back, but that only worked for earlier versions of WP7, it didn't even work after WP7.5

jmwhite, 1 year ago

I've done a write up, based on your findings zerocents and appropriately credited you for this brilliant find!

I went back through the Windows Phone versions. From this discovery Windows Phone 7.5 onwards supports CSS3 Media Queries, as the magic is all tied to the version of Internet Explorer Mobile on the device.

The reason as to why media queries don't work when a email is received via Exchange Server on Windows Phone, remains unclear. I have a few theories, based on a small investigation I did which I documented in my write up.

zerocents zerocents, 1 year ago

Nice writeup, thanks!


Michael Muscat
wilbertheinen wilbertheinen, 1 year ago

It seems to have impact on Outlook 2000, 2002 and 2003. I did a test with border-radius in Litmus and when I use the ie-edge metatag it renders border-radius beautifully :-D

And opacity!!!


Create a Clang!
jmwhite, 1 year ago

This is a very interesting find. I'm going to fire up a experimental boilerplate and test this out.

jmwhite, 1 year ago

After some investigation it seems that it is possible for IE9 rendering capabilities to be used with Outlook Express/Outlook 2003, thanks to this write up from Email On Acid, sometime ago.

http://www.emailonacid.com/blog/details/C13/designing_html_emails_for_outlook_2003_and_outlook_express

If the meta-tag that forces IE to render in edge (standards mode) is present, and IE9 rendering is available, CSS3 support is possible in these clients. This means you have the CSS3 capabilities of IE9 at your disposal.

However, be cautious in the fact that just because the OS the client is running might have IE9 installed, doesn't mean Outlook will use it according to their tests. Though the meta tag may have more influence in this case and potentially force it.

Anyone else is welcome to do further tests.

zerocents zerocents, 1 year ago

Regarding Outlook 97-03, it uses the rendering engine of the IE version that is installed. If they are running Windows XP they can't go higher than IE8. Litmus is not necessarily reliable for this kind of test.


Michael Muscat
jmwhite, 1 year ago
zerocents wrote:

Regarding Outlook 97-03, it uses the rendering engine of the IE version that is installed. If they are running Windows XP they can't go higher than IE8. Litmus is not necessarily reliable for this kind of test.

Yes this is a good point.

You'd be reliant on the user running at least Windows Vista in order for it to even be possible for IE9 to be used for rendering.

Like you've said, Windows XP clients are stuck with IE8 being the highest rendering standards available.

I'm also going to put it out there that only Outlook 2003 has CSS3 possibilities. The highest Windows OS that Outlook Express will only run natively is Windows XP, meaning that again you'd be stuck with IE8 standards.

You may be able to offer a small portion of Outlook 2003 users a better experience by forcing IE edge mode, but I'm pretty sure these client usage statistics are rather low now anyway, still its a good find.

jmwhite, 1 year ago

Heads up!

The inclusion of the IE edge meta tag appears to break printing in Outlook 2003. I can't comment on other older Outlook variants that are IE based or various OS combos, but certainly in Outlook 2003 on Windows XP, any email with this meta tag refuses to print. No errors or anything, just a quick flash of the print dialog box and then nothing, doesn't make it to the printer queue, with no event logs either.

A rare situation but in my case, the email template being used was required to be printed and some client machines were still on Outlook 2003 and Windows XP, yay.

To workaround this I just excluded the IE Edge meta from Outlook entirely to be safe. It will still be parsed on Windows Phone.

<!--[if !mso]><!-- -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
zerocents zerocents, 1 year ago

Windows Phone 8.1 is out :)

Responsive capabilities appear unchanged, still need the meta tag to enable it. External stylesheets/fonts still appear to be no go, but forms appear to be working now (ie. Checkbox hack).


Michael Muscat
jmwhite, 1 year ago

Beat me to it!

Though WP 8.1 is not officially out yet, you can obtain the RTM build via the Preview for Developers programme. I updated my Lumia 925 this morning, it won't be rolled out generally for a few months yet.

Forcing IE Edge mode is still required to enable CSS3 support as mentioned. Forms are likely to be working as WP 8.1 now includes IE Mobile 11 so new features/standards are available to the mail client.

BenjaminGraphics83 BenjaminGraphics83, 1 year ago

The funny thing is I included <meta http-equiv="X-UA-Compatible" content="IE=edge" /> in all my emails for the last two years because I used to have an idiot boss that thought she was doing a better job by checking all webversions of emails in compatability mode. I even went to her and said "Tell me what you think it does" and she said "Makes things more compatible, duh!"

SO... I was like "screw it" and put in the meta edge tag in all my emails since.  She never noticed her 'magic button' was gone, and I didn't have to deal with IE8 or lower rendering again.

John Martin, 1 year ago

Is this phone as have features to install all kind of online cloud storage apps of Google Drive, Drop Box, DataBagg , MediaFire, windows apps in this windos8.1 phone.

zerocents zerocents, 11 months ago

This meta tag is the gift that just keeps on giving. I can confirm that adding this tag to your templates enables IE edge rendering capabilities in these additional mail clients:

Windows 8 Mail app
Windows Live Mail


Michael Muscat

Sign up for free.
Then send campaigns for as little as $9/month

Create an account