为什么在iPhone邮件中的字体大小如此微小?必须扩展到26px

我正在为雇主制作响应式电子邮件模板。对于台式机尺寸，我能够将默认字体大小放在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">

还有其他一些CS与调整图像，边距等相关。但这是唯一处理字体大小的CSS(所有REM信息都是内联信息，因此Bronto/gmail不会剥离它(。如果我在浏览器中将其调整到移动尺寸，则文本看起来很大，但是当在iPhone上查看时，它看起来很棒。我担心这可能是iPhone怪癖，并且在其他类型的设备上看起来会很大。有人有洞察力吗？

这是我使用的模板中的一些代码(我看不到此问题(：

尝试使您的<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;">

好吧，终于弄清楚了。幸运的是，我一直在经历并使我们所有的电子邮件模板响应迅速，其中一个没有英雄图像。你猜怎么了？字体尺寸在移动设备上看起来很大！因此，经过一些实验，我发现

img {
    width: 100% !important;
}

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

您听说过视口元标记了吗？您应该考虑将此标签添加到网站上的元数据中。虽然要谨慎，因为它可以操纵您已经配置的其他HTML元素。

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

这是指向页面的链接，以详细说明它的作用。

https://developer.mozilla.org/en/docs/mozilla/mobile/mobile/viewport_meta_tag

fwiw，我认为您正在为使用text-size-adjust属性而复杂化。

根据此MDN文档上的浏览器兼容性图表，浏览器支持差，而且有障碍。

其次，我阅读此W3C文档的方式，我认为您并不是为了其预期目的使用它。W3C指出：

此模块包含与一个可能的CSS的功能适用于台式计算机显示的调整页面的机制在较小的屏幕上显示，例如手机的屏幕...

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

您知道，不使用视口元标签的旧网页将被缩放以适合移动设备的视口。问题在于，文本通常变得太小而无法阅读，并且此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=controlhttps://drafts.csswg.org/css-size-adjust/#text-size-achjust
https://caniuse.com/#search=font-size-udjust

相关内容

最新更新

热门标签：