Question

我正在为响应式电子邮件开发自己的框架。当手机处于横向模式时，iPhone上的字体大小问题太大了。我试过-webkit-text-size-adjust：100％;正如其他主题所建议的那样，但我发现的解决方案似乎对我不起作用。我正在使用Email On Acid测试我的框架。

以下是代码：

HTML

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="email-background">
        <div class="email-container">
            <p class="center">Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Fusce non diam consectetur, tempor sapien id, 
semper mi.</p>
       </div>
    </div>
</body>
</html>

CSS

body {
    -webkit-text-size-adjust: 100%; 
}

p {
    font-family: 'Verdana', sans-serif;
    font-size: 14px;
    color: #000000;
    line-height: 1.5;
    margin: 20px;
}

.center {
    text-align: center;
}

Answer 1

好的，所以我尝试重新创建你的例子，我能够让它发挥作用。这是我的代码，我在我的iPhone上测试它，这看起来很正常。

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">


p {
    font-family: 'Verdana', sans-serif;
    font-size: 14px;
    color: #000000;
    line-height: 1.5;
    margin: 20px;
    -webkit-text-size-adjust: auto <!-- I changed it to auto and moved it -->
                                   <!-- to the paragraph tag.             -->
}

.center {
    text-align: center;
}
  </style>

</head>
<body>
    <div class="email-background">
        <div class="email-container">
            <p class="center">Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Fusce non diam consectetur, tempor sapien id, 
semper mi.</p>
       </div>
    </div>
</body>
</html>

希望这有帮助！

-webkit-text-size-adjust：100％不适用于iphone

1 个答案: