html - Outlook 2007 到 2013 显示设备媒体查询

Question

我开发了一个自定义电子邮件模板，该模板使用媒体查询来定位小于 480 像素的设备。电子邮件在每个电子邮件客户端和平台(Gmail、Yahoo!、Hotmail、Apple Mail、Thunderbird、Outlook 2003 等)中的外观和显示都非常完美，但 Outlook 2007 至 2013 除外。

Outlook 2007 到 2013 奇怪地选择媒体查询并使用给定的 css 声明设置电子邮件的样式。当我删除媒体查询时，它呈现完美。知道如何让 Outlook 忽略媒体查询吗？

下面是正在使用的媒体查询以及 jsFiddle 链接。将 max-device-width 更改为 max-width 以查看正在运行的媒体查询。

---

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

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

Answer 1

您可以强制 Microsoft 忽略部分代码:

<!--[!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]-->

这是 Outlook version numbers