在 iPhone 6（可能还有其他）上，我的简单 HTML 电子邮件显示为愚蠢的大字体

Question

我有一个针对客户的小应用程序，它会发送一些确认邮件和信息邮件。这一切都很好。但是，当我在 iPhone 上查看此类电子邮件时，它看起来像这样：https://i.stack.imgur.com/GGyvo.png

我试过如下，因为这个带iphones safari，不乱字体。在电子邮件中（在 android 设备上看起来很漂亮）这不会起作用，不知何故。

<html>
<style type="text/css">
    body, p{
        -webkit-text-size-adjust: none;
    }
</style>
<body>
<font face="arial" size="10px">
<%=in.temp.str7%>
</font>
</body>
</html>

Answer 1

设置视口比例可能会有帮助。

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

Answer 2

尝试添加：

<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no"/>

到 head 标签并将 -webkit-text-size-adjust: none; 移动到 body 标签和字体标签内，像这样 - <body style="-webkit-text-size-adjust: none;"> 或者两者都做并将其保留在 header 也是

老实说，问题可能来自影响比例的 html 中的其他样式或元素（希望通过视口解决）所以请记住，如果您从外部来源将内容导入此模板，它可能会保留会影响其呈现方式的样式。

Answer 3

您的指导是正确的，但仅靠您的提示是行不通的。我现在添加了一个文档类型并稍微清理了所有内容。我还去掉了字体标签（据我所知，html 5 不再支持它）。无论如何，我不知道究竟是什么解决了问题，但这肯定是一个很好的基础并且工作正常：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style>
        body{
            font-family: Arial,Helvetica, sans-serif !important;
            font-size: 14px !important;
            -webkit-font-smoothing: antialiased !important;
            -webkit-text-size-adjust: none !important;
        }
    </style>
<head>
<body>
    <%=in.temp.str7%>
</body>
</html>

在 iPhone 6（可能还有其他）上，我的简单 HTML 电子邮件显示为愚蠢的大字体

On iPhone 6 (and probably others) my simple HTML emails are display with stupidly large font

iphone

html-email