email - Gmail 应用 (Android) 上的响应式电子邮件

标签 email gmail responsive-design html-email

我创建了一个响应式电子邮件模板，该模板适用于所有网络客户端、所有版本的 Outlook、Apple 邮件、雷鸟、iOS、HTC 的“邮件”应用程序以及几乎所有其他内容，但不包括 Lotus notes。

不适用于 Android 上的 Gmail 应用。我很确定这是因为 gmail 去掉了标题中的所有 css(包含媒体查询)，所以它显示标准的网络版本，但窗口是移动大小，所以它显示大约 300 像素的电子邮件的一半。反正有没有强制它使用媒体查询？失败了有没有办法改变视口(viewport)？最好的后备选择是什么？

谢谢!

最佳答案

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

以下是替代方案:

流体布局 - 基于百分比的布局 - 通常是 100% 的单列电子邮件。您可以添加 max-width 变通方法来限制其在桌面上的宽度。这是所有主要客户 100% 支持的，在我看来是 HTML 电子邮件的最佳技术。

对齐表格 - 这比响应更“自适应”。与 float div 相同。 HTML 的 align="left"表中的属性在主要电子邮件客户端中的工作更一致，如 float支持有限。

靠左 - 只需将您的电子邮件设计为左侧的所有重要内容。设备将始终显示最左侧的 300 左右像素，因此拆分列、文本左侧、图像右侧布局可能是合适的。

您可以找到几个流体和 float /对齐的示例 here .

关于email - Gmail 应用 (Android) 上的响应式电子邮件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13604300/