为什么 iPhone 邮件中的字体大小这么小？必须放大到 26px

Question

我正在为我的雇主制作响应式电子邮件模板。对于桌面大小，我能够将默认字体大小保留为 16px，并根据需要使用 rem 调整大小。它在桌面上和 Gmail 中看起来都不错，而且响应速度很快。但是，在 iPhone 上的邮件中查看时，字体太小了。我必须添加一个媒体查询，将基本字体大小增加到 26px，以便在电子邮件中获得合理的字体大小。我试过做一些研究，但似乎其他人不必做同样的事情。代码中 CSS 很少，但这是我所拥有的：

body, table, td, a, p, span {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} 

@media screen and (max-width: 600px) {

    html, td {
        font-size: 26px !important;
        line-height: 1.3;
    }
}

我也有

<meta name="viewport" content="width=device-width, initial-scale=1">

还有一些其他 CSS 与调整图像大小、边距等有关，但这是唯一 CSS 处理字体大小（所有 rem 信息都是内联的，因此它未被 Bronto/Gmail 删除）。如果我在浏览器中将它调整为移动尺寸，文本看起来很大，但在我的 iPhone 上查看时，它看起来很棒。我担心这可能是一个 iPhone 怪癖，而且它在其他类型的设备上看起来会很大。有没有人有任何见解？

Answer 1

您听说过视口元标记吗？您应该考虑将此标记添加到您网站上的元数据中。不过要小心，因为它可能会操纵您已经配置的其他 HTML 元素。

<meta name="viewport" content="width=device-width, initial-scale=1">

这是一个 link 页面，更详细地解释了它的作用。

https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Answer 2

FWIW，我认为您尝试使用 text-size-adjust 属性.

会使您的生活复杂化

根据 this MDN document 上的浏览器兼容性图表，浏览器支持不佳且存在错误。

其次，我阅读的方式 this W3C doc 我认为您没有将其用于预期目的。 W3C 指出：

This module contains features of CSS relating to one possible mechanism for adapting pages designed for desktop computer displays for display on smaller screens such as those of mobile phones...

其目的是为专为桌面显示设计的页面提供解决方案。

如您所知，不使用视口元标记的旧网页将按比例缩小以适应移动设备的视口。这样做的问题是文本通常变得太小而难以阅读，text-size-adjust 属性建议通过在移动设备上放大文本来解决这个问题。

我认为如果您继续使用视口元标记，使您的模板具有响应性，并调整元素大小以便它们在所有设备上都能很好地显示，如果您不使用 text-size-adjust，您将获得良好的效果，即一些类似以下内容：

body, table, td, a, p, span {font-size:16px;}

有关 text-size-adjust 的良好信息来源：
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust?v=control https://drafts.csswg.org/css-size-adjust/#text-size-adjust
https://caniuse.com/#search=font-size-adjust

Answer 3

这是我使用的模板中的一些代码（我没有看到这个问题）：

尝试让您的 <meta> 标签看起来更像这样：

<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width">

第一个标签在 iOS 10 邮件中禁用自动缩放，这可能会影响您的文本大小。第二个标签设置视口；强制初始比例不是必需的，可能会影响您的设计。

也尝试将内联正文样式从 <body> 标记移动到 <style> 中的通用选择器内部，如下所示：

<style>
    /* What it does: Stops email clients resizing small text. */
    * {
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }
</style>

<body width="100%" bgcolor="#ffffff" style="margin: 0; mso-line-height-rule: exactly;">

Answer 4

好吧，终于想通了。幸运的是，我一直在研究并使我们所有的电子邮件模板都具有响应性，其中一个没有英雄形象。你猜怎么着？对于无图像模板，字体大小在移动设备上看起来很大！所以经过一些实验，我发现

img {
    width: 100% !important;
}

完全解决了这个问题，现在实际的字体大小与 CSS 中设置的相匹配。尽管在图像本身及其父容器上设置了所有 width:100% 样式，但我猜图像一定是太大了并触发了所有内容的大小调整，我猜？如果有人有解释，我很想听听。

为什么 iPhone 邮件中的字体大小这么小？必须放大到 26px

Why font-size in iPhone mail so tiny? Had to scale up to 26px

ios

email

responsive-design

newsletter