Outlook Web 应用显示响应式电子邮件的移动和桌面版本答案

【问题标题】：Outlook web app displays both mobile and desktop versions of responsive emailOutlook Web 应用显示响应式电子邮件的移动和桌面版本
【发布时间】：2014-01-29 12:16:05
【问题描述】：

有人可以帮忙吗？

我使用桌面和移动版本的代码创建了响应式电子邮件。除了在显示两个版本的 Outlook Web 应用程序中之外，它在每个邮件客户端中都可以正常工作。

我在使用 Outlook 2010 时遇到了同样的问题，但我通过将移动内容包装在有条件的 mso 评论中来解决它：

<!--[if !mso]><!-->
<!--<![endif]-->

【问题讨论】：

这实际上是outlook.com 的一个相当大的问题，所以这不是题外话。他将不得不发布他的整个代码，这最终会成为潜在回答者的调试噩梦。请打开，我可以发布解决方案。
有没有办法向管理员解释它不是 ff 主题，以及重新打开问题的程序是什么？任何人，请...
@ZephyrusDigital 你能发布一个解决方案吗？谢谢！

标签： responsive-design html-email outlook-web-app

【解决方案1】：

哇！

无论如何，我确定您的电子邮件在移动版的表格周围设置了一些 display:none / overflow:hidden css，但 outlook.com 并不总是很好。

我认为 Outlook.com 的挑剔预处理器是罪魁祸首。

我发现纠正这个问题的方法是将.mobileonly{display:none;} 添加到您的样式标签，然后将class="mobileonly" 添加到测试中不断弹出的任何问题元素中。大多数情况下，您只需要制作更高的容器表。

如果这不起作用，请将您的 html 放入 jsfiddle，我会进一步研究。

【讨论】：

感谢您的回复，ZephyrusDigital。不幸的是，该解决方案适用于 Outlook 邮件，但不适用于 Outlook Web App。不幸的是，由于客户坚持我无法为您提供 jsfiddle，但请相信我，我已经尝试了所有可用的解决方案。
啊，很抱歉，没有意识到它们是不同的。没有 office365 帐户，它不在 Litmus 上，所以我无法测试。祝你好运！

【解决方案2】：

我做了同样的噩梦，并尝试了书中的所有内容。最终我找到了解决方案。

将包含列的高度设置为 0 - 桌面和移动图像都需要自己的类。移动图像的内联宽度和高度也应设置为 0。然后在您的桌面查询中...显示：无，对于移动图像，宽度和高度设置为 0。

然后在您的响应式查询中，您可以强制调整相应图像的高度和宽度并使用显示块。试试这个它对我有用...即使在 Outlook 2003 中！

【讨论】：