15

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

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

谢谢！

4

2 回答 2

22

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

以下是替代方案：

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

您可以在此处找到几个流体和浮动/对齐的示例。

于 2012-11-28T17:36:36.213 回答
0

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

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

诀窍是添加

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

到电子邮件的最广泛部分

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

于 2015-10-02T12:41:35.633 回答