Outlook 2007 to 2013 Display device requests

I developed a special email template that uses a media query for target devices smaller than 480 pixels. Email looks and displays in every email client and platform - Gmail, Yahoo !, Hotmail, Apple Mail, Thunderbird, Outlook 2003, etc. - except for Outlook 2007 through 2013.

Outlook 2007 through 2013 weirdly picks up a media query and stylizes an email with css ad data. When I delete a media query, it displays perfectly. Any idea how I can have Outlook ignore a media request?

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


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

@media only screen and (max-device-width: 480px) { 
+4
source share
4 answers

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

+13
source

I was lucky 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 regarding which mso number refers to which version of Outlook?

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

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

0
source

If you want to hide it,

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

and in media queries write display:block;

0
source

Follow my advice, do not reinvent the wheel, use several starter patterns that have already been tested many times, and many errors are already fixed as Antwort

-1
source

Source: https://habr.com/ru/post/1483828/


All Articles