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

时间:2014-01-29 12:16:05

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

有人可以帮忙吗?

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

我在Outlook 2010中遇到了同样的问题,但我通过将移动内容包装在contidional mso评论中来修复它:

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

2 个答案:

答案 0 :(得分:0)

呜!

无论如何,我确定你的电子邮件在div上设置了一些display:none / overflow:hidden css包围你的移动版桌面,但outlook.com并不总是玩好的。

我认为outlook.com的挑剔预处理器应该受到责备。

我发现要纠正此问题的方法是在样式标记中添加.mobileonly{display:none;},然后将class="mobileonly"添加到任何不断出现在测试中的问题元素。大多数情况下,你只需要做更高的容器表。​​

如果这不起作用将你的html扔进一个jsfiddle,我会进一步研究它。

答案 1 :(得分:0)

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

将包含列高度设置为0 - 桌面和移动图像均需要各自的类。移动图像应具有内联宽度和宽度。高度也设置为0.然后在桌面查询中...显示:无,宽度和高度设置为0表示移动图像。

然后在您的响应式查询中,您可以强制resp图像的高度和宽度,并使用显示块。试试这个对我有用......甚至在Outlook 2003中也是如此!