Outlook 2007 to 2013 Displaying Device Media Queries

Question

I developed a custom email template that uses a media query to target devices smaller than 480px. The email looks and displays perfect in every email client and platform - Gmail, Yahoo!, Hotmail, Apple Mail, Thunderbird, Outlook 2003, etc - with the exception of Outlook 2007 to 2013.

Outlook 2007 to 2013 oddly picks up the media query and styles the email with the given css declarations. When I remove the media query, it renders perfectly. Any idea how I can have Outlook ignore the media query?

Below is the media query being used as well as a jsFiddle link. Change max-device-width to max-width to see the media query in action.

---

jsFiddle: http://jsfiddle.net/danimalnelson/uQ7kg/

@media only screen and (max-device-width: 480px) {

Solution 1

You can force Microsoft to ignore parts of the code with:

<!--[!if gte mso 9]><!-->
 // This will be ignored by Outlook 2007
<![endif]-->

<!--[!if gte mso 15]><!-->
 // This will be ignored by Outlook 2013
<![endif]-->

<!--[if !mso]><!-->
 // This will be ignored by all Microsoft Outlook
<!--<![endif]-->

Here are the Outlook version numbers

Solution 2

I have been lead to believe that:

<!--[!if gte mso 9]>
 // This WILL be rendered by Outlook 2007 as 'gte' means greater than or equal to
<![endif]-->

<!--[!if gt mso 9]>
     // This WON'T be rendered by Outlook 2007 as 'gt' means greater than
<![endif]-->

John. Do you have a link to where you found the resource as to which mso number relates to which outlook version?

Is there a Microsoft page somewhere with a definitive list of mso numbers?

The most useful resource I have fond so far is this German wiki page: http://de.wikipedia.org/wiki/Conditional_Comments

Solution 3

If you want hide use this

<!--[if !mso]><!-->
// This will be ignored by all Microsoft Outlook give display:none
<!--<![endif]-->

and in media queries write display:block;