Question

我创建了一个响应式电子邮件模板，适用于所有网络客户端，所有版本的Outlook，苹果邮件，雷鸟，iOS，HTC的“邮件”应用程序以及几乎所有其他减去Lotus笔记的内容。

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

谢谢！

Answer 1

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

以下是替代方案：

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

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

Answer 2

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

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

诀窍是添加

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

到电子邮件的最广泛部分

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

Gmail应用程序（Android）上的响应式电子邮件

2 个答案: