手机邮件字体太小

问题描述 投票:0回答:5

我将字体设置为 15px,但在移动设备上查看电子邮件(特别是邮件 > gmail)时,文本显得小得多。如何在不增加桌面大小的情况下增加移动设备的大小,我听说 gmail 会删除媒体查询。

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

有什么想法吗?

html css html-email
5个回答
5
投票

最有可能发生的情况是 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)。


2
投票

您可以像在网络上一样使用

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">

0
投票

我能想到的最简单的事情就是使用视口单位。即这些:

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

例如,将字体大小属性设置为某个标量*vmax,然后从那里进行调整。


0
投票
我也有同样的问题。对我来说,将容器 CSS 更改为:

width: 600px; max-width: 100%;
致:

width: 100%; max-width: 600px;
解决了问题。


0
投票
我尝试了从你们那里读到的所有内容..最大宽度:100%宽度100,媒体CSS不起作用...... 请查看我附加的电子邮件消息..如果我删除底部图像=字体在移动设备上的大小正确,如果我不删除它,无论我尝试什么,它都会很小。

链接到我的电子邮件 HTML 和图像

请帮我解决这个问题,我需要电子邮件清晰可见。

© www.soinside.com 2019 - 2024. All rights reserved.