Gmail 应用 (Android) 上的响应式电子邮件答案

【问题标题】：Responsive emails on Gmail app (Android)Gmail 应用 (Android) 上的响应式电子邮件
【发布时间】：2012-11-16 06:12:18
【问题描述】：

我创建了一个响应式电子邮件模板，该模板适用于所有 Web 客户端、所有版本的 Outlook、Apple 邮件、Thunderbird、iOS、HTC 的“邮件”应用程序以及除 Lotus notes 之外的几乎所有其他内容。

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

谢谢！

【问题讨论】：

标签： email gmail responsive-design html-email

【解决方案1】：

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

以下是替代方案：

流动布局 - 基于百分比的布局 - 通常是 100% 的单列电子邮件。您可以添加 max-width 变通方法来限制其在桌面上的宽度。所有主要客户都 100% 支持这一点，我认为这是 HTML 电子邮件的最佳技术。
对齐表格 - 这比响应式更具“适应性”。与浮动 div 相同。表格中 HTML 的 align="left" 属性在主要电子邮件客户端中的工作更加一致，因为 float 的支持有限。
保持在左侧 - 只需设计您的电子邮件，将所有重要的东西放在左侧。设备将始终显示最左侧的 300 左右像素，因此拆分列、文本左侧、图像右侧布局可能是合适的。

你可以找到几个流体和浮动/对齐的例子here。

【讨论】：

得出了同样的结论：/
不幸的是，情况仍然如此。

【解决方案2】：

您可以使用此处看到的技术来强制电子邮件在 Gmail 应用程序上保持在桌面宽度。这不是一个出色的解决方案，因为一切都非常小，而且肯定没有响应（恰恰相反）。

但至少它会阻止你的布局被破坏。

诀窍是添加

<div style="display: none; white-space: nowrap; line-height: 0; color: #ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>

到电子邮件的最宽部分

https://css-tricks.com/override-gmail-mobile-optimized-email/

【讨论】：