我将字体设置为 15px,但在移动设备上查看电子邮件(特别是邮件 > gmail)时,文本显得小得多。如何在不增加桌面大小的情况下增加移动设备的大小,我听说 gmail 会删除媒体查询。
<table>
<tr>
<td style="font-size: 15px;"><p style="font-size: 15px;">Some text</p></td>
</tr>
</table>
有什么想法吗?
最有可能发生的情况是 Gmail 正在拾取不响应的图像或其他元素(例如设置为
width="600"
,但不使用附加响应代码,style="width:100%;height:auto;max-width:600px;"
)。
在这种情况下,您需要修复无响应的元素,然后 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"]
(来自 Acid 的电子邮件)
尽管如此,即使对于 ANGA 类型的 Gmail 用户来说,也肯定可以呈现完全清晰的文本(即具有响应式电子邮件)。如果您有复杂的 2 或 3 列电子邮件,请使用“混合”方法 - 否则,请检查您的图像或非常长的 URL(使用
<wbr>
分解 URL)。
您可以像在网络上一样使用
font-size
在移动设备上更改 media-query
。现在许多移动客户端都支持媒体查询,包括大多数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 邮件有时会自动设置文本格式。使用
<meta>
中的此 <head>
标签完全禁用 iOS 10 邮件中的自动缩放:
<meta name="x-apple-disable-message-reformatting">
我能想到的最简单的事情就是使用视口单位。即这些:
vw:1/100 视口宽度 vh:1/100 视口高度 vmin:最小边的 1/100 vmax:最大边的 1/100
例如,将字体大小属性设置为某个标量*vmax,然后从那里进行调整。
width: 600px;
max-width: 100%;
致:
width: 100%;
max-width: 600px;
解决了问题。