为什么iPhone邮件中的字体大小如此之小？不得不放大到26px

我正在为我的雇主设计一个响应式电子邮件模板。对于桌面大小，我可以保留16px的默认字体大小，并根据需要使用rem来调整大小。在桌面上，在Gmail中看起来很好，并且完全响应。但是，在iPhone上的Mail中查看时，字体很小。我必须添加一个媒体查询，将基本字体大小增加到26px，以便在电子邮件中获得合理的字体大小。我试着做一些研究，但似乎并不像其他人那样做。有一个在代码很少CSS，但这里是我有：为什么iPhone邮件中的字体大小如此之小？不得不放大到26px

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的怪癖，但它会在其他类型的设备上看起来很大。有没有人有任何见解？

来源

2017-05-05 bansheekitty

好了，终于想通了。幸运的是，我已经经历了所有的电子邮件模板，并且其中一个没有英雄形象。你猜怎么了？无图像模板的字体大小在手机上看起来很大！所以经过一些实验，我发现

img { 
    width: 100% !important; 
}

完全解决了这个问题，所以现在实际的字体大小相匹配什么是在CSS设置。尽管所有的宽度：在图像本身和它的父容器上设置了100％的样式，但是不知何故，图像一定是太大了，并且触发了所有内容的大小调整，我想？如果有人有解释，我很乐意听到它。

来源

2017-05-11 15:14:42 bansheekitty

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

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

这里是一个链接到一个页面，解释它做了更详细的。

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

来源

2017-05-05 15:05:08

谢谢，我应该提到我已经有了。我会将其添加到我的描述中。 – bansheekitty

您是否尝试在多个浏览器上查看该页面？他们都给出了相同的结果吗？ –

你的意思是我的手机上有多个浏览器？（因为我的手机是我得到不寻常的结果）。我已经在我的手机上使用Safari进行了尝试 - 实际上我没有其他任何浏览器。我会看到应用商店中有什么可用的。 – bansheekitty

FWIW，我认为你是复杂的生活试图用文字大小调整属性。

根据this MDN document上的浏览器兼容性图表，浏览器支持和它的错误。

其次，我读的方式 this W3C doc我不认为你使用它的目的。 W3C指出

该模块包含与一个可能机制适应专为台式电脑显示器对小屏幕如手机显示页面的CSS功能...

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

如您所知，不使用视口元标记的旧网页将被缩小以适应移动设备的视口。问题在于文本经常变得太小而无法阅读，并且此文本大小调整属性建议通过在移动设备上放大文本来弥补此问题。

我认为如果您继续使用视口元标记，使您的模板响应并调整元素的大小，以便它们在所有设备中都能很好地显示，如果您不使用文本大小调整一些这样的：信息的有关文字大小调整

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

良好来源：
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

祝你好运！

来源

2017-05-06 12:09:26

谢谢，但我试过拿出那行CSS，但结果相同。 – bansheekitty

Thx @bansheekitty，您可能需要仔细检查模板中是否有其他元素无法响应，例如图像，表格或其他具有硬编码维度的元素 –

模板使用一系列表格，因为它是一个电子邮件模板不幸的是，你必须编写这些代码，但一切都是响应式的（我已经测试过）。没有硬编码维度（唯一的非百分比宽度只是在容器上设置最大宽度）。我开始认为这只是一个奇怪的移动事物。它在iPhone上的邮件，Android上的邮件应用以及iPhone上的Chrome和Firefox上看起来很好。 – bansheekitty

下面是我用的模板一些代码（在这里我没有看到这个问题）：

尝试使你的<meta>标签看起来更象这样：

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

第一个标签禁用自动在iOS 10 Mail中，这可能会影响您的文字大小。第二个标签设置视口;迫使初始规模不应该是必要的，可能会抛弃你的设计。

也可以尝试移动从<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;">

来源

2017-05-08 11:55:35

谢谢，但我试过后得到了同样的结果。 – bansheekitty

嗯，你怎么设置字体大小？你的帖子提到'rem' ...你尝试过使用'px'吗？老派，我知道，但电子邮件客户端... –

我正在使用REM。我真的不想切换到PX，尤其是从那时起，我无法增加移动设备的尺寸，即使它按照预期工作，我也希望能够这样做（例如，移动设备的基准尺寸为18px，用于桌面）。 – bansheekitty

为什么iPhone邮件中的字体大小如此之小？不得不放大到26px

回答

相关问题