移动设备无法正确呈现自适应电

时间:2014-02-14 17:18:08

标签: css email responsive-design

提前感谢我的帮助。

这个真让我难过。我最初构建了一个坚实的布局,我测试并确保完美工作(在所有视图中都做到了)。如果我需要发送时事通讯,我可以随时更换内容。

无论如何,我注意到它并不总是呈现相同,即使它是我正在使用的那个模板,我首先要工作。

访问此处,然后点击相关文件:

http://www.jimharrison.co.uk/

single.jpg - 显示它应该如何显示(在浏览器中截图)

broken.jpg - 显示它在移动设备上的外观(从我们的电子邮件测试和发送系统截取的屏幕截图)。

3_col_template.html - 是html本身。请随意查看并深入了解代码。

注意:就像我之前所说的那样,它有效,有时会像这样呈现!这到底是怎么回事?!

(我们也在Iphone 5上进行了测试,有时候它有时也会测试它。)

目前我认为这是我们使用的电子邮件测试和交付软件的结果,但我再也不知道了。我唯一改变的就是内容(用实际内容替换占位符内容)。

编辑:这些问题发生在iphone 4-5

3 个答案:

答案 0 :(得分:1)

为解决我的问题,我把表放在彼此旁边,而不是用tds分隔。

要解决我在Outlook中遇到的表间距问题,我将“mso”样式应用于目标Outlook。

在样式部分,我使用了这个:

表{border-collapse:collapse; MSO的表lspace:0pt; MSO的表rspace:0pt;}

您还可以内联此内容并应用于其他元素(例如tds),以便在Outlook中尽可能重置布局。

答案 1 :(得分:0)

尝试使用设备宽度的媒体查询以及屏幕。

答案 2 :(得分:0)

使用电子邮件客户端可能很麻烦,通过移动设备使用桌面设备,我建议使用框架called Ink来消除开发过程中的痛苦并提高设备间的兼容性。

如果此类框架对您的方案过于臃肿,那么Campaign read this article会针对响应式电子邮件最佳做法提供。{/ p>

应该对您有所帮助的示例媒体查询:

@media only screen and (max-device-width: 480px) {
  /* Target mobile devices */
}