Question

我将字体设置为15px，但在移动设备上查看电子邮件时（特别是邮件＆gt; gmail），文字显得要小得多。如何在不增加桌面大小的情况下增加移动设备的大小，我听到gmail剥离媒体查询。

<table>
<tr>
<td style="font-size: 15px;"><p style="font-size: 15px;">Some text</p></td>
</tr>
</table>

有什么想法吗？

Answer 1

我能想到的最简单的事情就是使用视口单元。就是这些：

vw：1/100视口宽度 vh：1/100视口高度 vmin：最小边的1/100 vmax：最大边的1/100

例如，将font-size属性设置为某个标量* vmax，然后从那里进行调整。

Answer 2

您可以使用font-size更改移动设备上的media-query，就像在网络上一样。许多移动客户端现在都支持媒体查询，包括most of gmail。

.mobile-p {
  font-size: 18px !important; /* override inline style */
}

<table>
  <tr>
    <td>
      <p style="font-size: 15px;" class="mobile-p">Some text</p>
    </td>
  </tr>
</table>

此外，iOS Mail有时会自动格式化文本。完全使用<meta>中的<head>标记禁用iOS 10 Mail中的自动缩放：

<meta name="x-apple-disable-message-reformatting">

Answer 3

最有可能发生的情况是Gmail正在拾取没有响应的图像或其他元素（例如，设置为width="600"，但没有附加的响应代码style="width:100%;height:auto;max-width:600px;"）。 / p>

在这种情况下，您需要修复无响应的元素，然后Gmail不再需要调整文本大小。

Gmail现在将接受媒体查询，因此您可以在<head>部分中设置以下内容：

<style type="text/css">    
@media screen and (max-width: 620px) {
    ...
    }
</style>

话虽如此，如果您使用的不是本地电子邮件，而是您自己的域（术语：GANGA），则Gmail的行为会有所不同。这里的关键是使用这些类型的Gmail电子邮件的客户将去除@media查询（以及所有嵌入式CSS）。

如果其中包含无效的代码，或者其中不包含诸如属性选择器之类的代码，则Gmail还会删除整个<style>...</style>部分。 img[class="header"]（from Email on Acid）

尽管如此，即使对于GANGA类型的Gmail用户，也可以呈现清晰易读的文本（即具有响应电子邮件）。如果您有复杂的2或3列电子邮件，请使用“混合”方法-否则，检查您的图像或URL真的很长（用<wbr>分解URL）。