html - 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) {

Answer 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