Ios 为什么iPhone邮件的字体大小如此之小？必须扩展到26像素_Ios_Email_Responsive Design_Newsletter

Ios 为什么iPhone邮件的字体大小如此之小？必须扩展到26像素

ios email responsive-design

Ios 为什么iPhone邮件的字体大小如此之小？必须扩展到26像素,ios,email,responsive-design,newsletter,Ios,Email,Responsive Design,Newsletter,我正在为我的雇主制作一个响应电子邮件模板。对于桌面大小，我可以将默认字体大小保留为16px，并根据需要使用rem调整大小。它在桌面上，在Gmail中看起来很好，而且完全响应。然而，在iPhone上查看邮件时，字体非常小。我不得不添加一个媒体查询，将基本字体大小增加到26px，以便在电子邮件中获得合理的字体大小。我试着做了一些研究，但似乎其他人没有这样做。代码中几乎没有CSS，但我有： body, table, td, a, p, span {-webkit-text-size-adjust: 1

我正在为我的雇主制作一个响应电子邮件模板。对于桌面大小，我可以将默认字体大小保留为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的一个怪癖，而且在其他类型的设备上它看起来会很庞大。有人有什么见解吗？

您听说过viewport meta标记吗？你应该考虑把这个标签添加到你网站上的Meta。不过要小心，因为它可能会操纵您已经配置的其他HTML元素

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

这里有一个链接，指向一个页面，详细解释了它的功能

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

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

这里有一个链接，指向一个页面，详细解释了它的功能

FWIW，我认为您试图使用文本大小调整属性是在使您的生活复杂化

根据上的浏览器兼容性图表，存在浏览器支持差及其缺陷

第二，从我阅读的方式来看，我认为你并没有把它用于它的预期目的。W3C声明

此模块包含与一个可能的CSS相关的CSS功能为桌面计算机显示器设计的页面调整机制用于在较小屏幕（如手机屏幕）上显示

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

如您所知，不使用viewport meta标记的旧网页将被缩小以适合移动设备的视口。问题是，文本往往变得太小而无法阅读，而此文本大小调整属性建议通过在移动设备上放大文本来解决这一问题

我认为，如果继续使用viewport meta标记，使模板具有响应性，并调整元素的大小，以便它们在所有设备中都能很好地显示，如果不使用文本大小调整，您将获得良好的效果，例如：

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

关于文本大小调整的良好信息来源：

祝你好运

FWIW，我认为您试图使用文本大小调整属性是在使您的生活复杂化

根据上的浏览器兼容性图表，存在浏览器支持差及其缺陷

第二，从我阅读的方式来看，我认为你并没有把它用于它的预期目的。W3C声明

此模块包含与一个可能的CSS相关的CSS功能为桌面计算机显示器设计的页面调整机制用于在较小屏幕（如手机屏幕）上显示

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

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

关于文本大小调整的良好信息来源：

祝你好运

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

尝试使您的

标记看起来更像这样：

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

第一个标记禁用iOS 10邮件中的自动缩放，这可能会影响文本大小。第二个标记设置视口；强制初始比例应该是没有必要的，并且可能会偏离您的设计

还可以尝试将内联主体样式从

标记移动到

中的通用选择器中，如下所示：

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


/*功能：停止电子邮件客户端调整小文本的大小*/
* {
-ms文本大小调整：100%；
-webkit文本大小调整：100%；
}