Gmail应用程序(Android)上的响应式电子邮件

Question

我创建了一个响应式电子邮件模板,适用于所有Web客户端,所有版本的outlook,Apple邮件,thunderbird,iOS,HTC的"Mail"应用程序以及几乎所有其他减去Lotus笔记的内容.

对Android上的Gmail应用程序不起作用.我很确定这是因为gmail剥离了标题中的所有css(其中包含媒体查询),因此它显示标准的Web版本,但窗口是移动大小,因此它显示大约300px电子邮件的一半.反正是否强迫它使用媒体查询？如果失败,有没有办法改变视口？什么是最好的后退选项？

谢谢!

Answer 1

没有使用媒体查询的解决方法,因为它们无法内联.不幸的是,Gmail没有关于响应式电子邮件的解决方案(假设响应=媒体查询).

以下是替代方案:

1. 流体布局 - 基于百分比的布局 - 通常是100%的单列电子邮件.您可以添加最大宽度变通方法以限制其在桌面上的宽度.这是所有主要客户100%支持,并且在我看来是HTML电子邮件的最佳技术.
2. 对齐表 - 这比响应更具"适应性".与浮动div一样工作.align="left"表中的HTML 属性在主要电子邮件客户端中的工作更为一致,因为float支持有限.
3. 保持在左侧 - 只需在左侧设计包含所有重要内容的电子邮件即可.设备将始终显示最左侧300个左右的像素,因此分割列,文本左侧,图像右侧布局可能是合适的.

你可以找到的流体几个例子和float /对准这里.