覆盖 Gmail 的移动优化邮件

许多邮件都是以大屏幕为设计目标的。 虽然在大屏幕上看起来很棒的文本在移动设备上可能难以阅读。

如果 Gmail 认为邮件中任何文本的字体大小太小而无法阅读，它会增加大小并用此通知标记邮件

这非常好。 原本可能无法阅读的内容变得易于阅读，无需捏合和缩放屏幕。

它也可能有点令人沮丧。 作为设计师，我们通常对代码的呈现方式有偏好。 第三方介入并劫持设计可能会让人感觉有点不爽，或者如果 Gmail 处理错误，甚至可能破坏整个布局。

可以提出一个合理的论点，即如果 Gmail 想要提高可读性，它应该简单地支持 媒体查询。 让我们控制创建更好的阅读体验，对吧？ 不幸的是，Gmail 不支持媒体查询。

让我们看看是什么触发了此功能以及覆盖它的几种方法。

是什么触发了字体大小的增大？

Gmail 似乎专门搜索邮件中比用于查看邮件的屏幕更宽的元素。 例如，如果 Gmail 注意到一个 table 元素宽 600px，但当前屏幕仅宽 320px，则该应用会将 字体大小 增大高达 50%。

如果 table 元素在屏幕范围内，则 Gmail 会按设计显示邮件。 例如，如果设备旋转到横向模式，则可能会被增大的同一封邮件实际上可能会正常显示。

解决此问题的三种方法

某些邮件实际上可能受益于更大的字体大小。 但是，其他邮件可能受益于完全阻止字体大小更改。 在这些情况下，有一些方法可以阻止 Gmail 的操作。

方法 1：使用 white-space: nowrap

Justin Khoo 提供了一种巧妙的技术

我发现，如果将 white-space: nowrap 样式应用于文本，并且如果增加文本大小会导致邮件宽度超出窗口宽度（导致邮件看起来非常糟糕），那么 Gmail 以某种方式感知到它并停止应用字体大小更改。

其想法是创建一个不换行的字符字符串，以便如果字体大小增加，它会导致字符溢出容器并阻止 Gmail 的功能被触发。

这最终是在 HTML 中最宽元素内部放置的一段代码，如下所示

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

Gmail 忽略 display: none 样式。 然后 white-space: nowrap 告诉 Gmail 不要将文本换行，这迫使 Gmail 停止字体缩放。

目标是获得一条略短于容器宽度的线。 并且颜色应与背景颜色匹配，使其不可见。

一些人担心在邮件中使用不可见的文本可能会导致它被标记为垃圾邮件。 在尝试此方法时以及在尽可能多的客户端中对其进行测试时，这绝对值得考虑。

方法 2：使用间隔符图像

我们可以在充当邮件容器的 table 的顶部添加一行。 假设该容器应该为 600px。

... 
  <tr class="gmail-fix">
    <td>
      <table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
        <tr>
          <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 600px;">
            <img src="spacer.gif" width="600" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 600px; width: 600px;"/>
            </td>
          </tr>
      </table>
    </td>
  </tr>
...

我们所做的是在表格顶部创建一行，该行嵌入图像并强制布局为 600px。 Gmail 会将表格识别为 600px，现在无法将其缩小，从而阻止文本缩放。

然后，我们可以通过向文档头的 <style> 部分添加 CSS 来隐藏支持媒体查询的客户端上的此行，Gmail 会忽略此 CSS

/* Hide spacer image in applications that support media queries */
@media only screen and (max-width: 600px) {
  *[class="gmail-fix"] {
    display: none !important;
  }
}

请注意，虽然此方法在测试中有效，但有报道称它并非所有邮件客户端的通用修复方法。 关键，一如既往：测试，测试，测试。

方法 3：声明 !important

这可能是最简单的方法

...
  <td>
    <p style="font-size: 13px !important;">The text</p>
  </td>
...

Gmail 会尊重内联样式上的 !important 声明。 !important 声明在 CSS 中获得了不好的评价，这是有道理的，因为它强制应用样式，因此难以覆盖。 当您构建必须随着时间推移而维护的网站时，这是一个问题。 但邮件并非如此。 它们是一次性的，使用寿命很短。 一个样式的无人区，那里没有什么是禁区！

这里需要注意的一点是，Outlook 2007 会忽略使用 !important 以内联方式设置样式的元素。 作为解决方法，我们可以在文档头的 <style> 部分包含此 CSS

p {
  font-size: 13px !important;
}

总结

Gmail 增大邮件中字体大小的技术是一把双刃剑。 一方面，在邮件显然是为桌面设计的并且变得更容易阅读的情况下，这是一个不错的增强功能。 另一方面，“增强功能”可能会损害我们精心设计的布局。

我们介绍的每种覆盖方法都有其优点和缺点。 其中一个是否优于其他？ 您是否尝试过其他方法？ 请在评论中分享！