HTML 电子邮件字体在 iPhone 上的邮件应用程序中无法缩放答案

【问题标题】：HTML Email Fonts Not Scaling in Mail App on iPhoneHTML 电子邮件字体在 iPhone 上的邮件应用程序中无法缩放
【发布时间】：2014-03-25 12:50:15
【问题描述】：

我需要创建一个电子邮件模板。我的电子邮件模板必须在 GMail 和 iPhone 上的邮件应用程序中工作。我使用 Zurb Ink 使模板在 iPhone 上的邮件应用程序中正常工作。但是，Gmail 不支持 HTML 电子邮件中的 style 标记。出于这个原因，我删除了该框架并从头开始。现在，电子邮件模板在 GMail 中运行良好，但文本在 iPhone 上的邮件应用程序中无法放大。文字全部挤在一起。目前，我的 HTML 如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;" height="100%">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Welcome.</title>
</head>

<body style="background-color:silver; color: #2D2D2D; font-family: 'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Neue', Arial; font-weight: normal; padding:0; margin: 0; text-align: left; line-height: 1.3; width:100%; height:100%; min-width: 100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; ">
  <table style="border:solid 0px #fff; width:100%;">
    <tr>
      <td align="center" valign="top" style="width: 100%;">
        <center>
          <table style="width:600px; border:solid 0px #fff; border-collapse: collapse;">
            <tr>
              <td align="right" style="text-align: right; vertical-align: middle;">
                <span style="color: #898989; font-size:12px;">Trouble viewing email? <a href="#" style="color: #6B6B6D; text-decoration:underline;">view it in your browser</a></span>
              </td>
            </tr>

            <tr>
              <td style="height:77px; vertical-align: middle; padding-left:35px; background-color:#fff; border-left: solid 1px #D6D6D6; border-right:solid 1px #D6D6D6;">
                <img alt="Welcome." src="http://dummyimage.com/126x36/d907d9/fff.png&text=Hello" height="36" width="126" />
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <img alt="Welcome." width="600" height="250" src="http://dummyimage.com/600x250/d907d9/fff.png&text=Welcome+to+the+new" style="display:block;" />
                            </td>
                        </tr>

                        <tr>
                            <td style="padding:0px 32px 36px 32px; background-color:#fff; border-top:solid 0px #fff;">
                                <div style="color:#92cc0a; padding-top:29px; font-size:36px; font-weight:lighter;">Welcome.</div>
                                <div style="padding-top:15px; font-size:14px; color:#363636;">
                                    Thanks for downloading our app. Prepare to experience a new world of imagination. Check us out on <a style="text-decoration: none;" href="https://www.facebook.com/myApp" target="_blank">Facebook</a>, <a style="text-decoration: none;" href="https://twitter.com/myApp" target="_blank">Twitter</a>, and <a style="text-decoration: none;" href="https://plus.google.com/+myApp/posts" target="_blank">Google +</a> for the latest details. Oh, and tell your friends!
                                </div>

                                <br />
                                Thank You
                            </td>
                        </tr>
                    </table>
                </center>
            </td>
        </tr>
    </table>
</body>

为什么 iPhone 上的邮件应用程序中的文本不能正确缩放。我已经包含了视口详细信息。我已经包含了 webkit-text-adjust 的东西。有人可以帮帮我吗？

非常感谢！

【问题讨论】：

另外，你能更好地解释这个问题吗，因为我的 iphone 和 gmail 应用程序的唯一区别是“谢谢”与上述 div 的样式不同。

标签： html css iphone html-email

【解决方案1】：

您实际上不能依赖样式被继承，这意味着您必须始终将每种样式应用于每个元素... 这意味着 div 上的字体大小实际上不会对其中的文本产生任何影响。

为了快速修复，我建议将文本包装在一个段落中并为其应用所需的样式。

<div style="padding-top:15px; font-size:12px; color:#363636;">
  <p style="font-family: 'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Neue', Arial; font-weight: normal; font-size: 26px; line-height: 36px;">Thanks for downloading our app. Prepare to experience a new world of imagination. Check us out on <a style="text-decoration: none;" href="https://www.facebook.com/myApp" target="_blank">Facebook</a>, <a style="text-decoration: none;" href="https://twitter.com/myApp" target="_blank">Twitter</a>, and <a style="text-decoration: none;" href="https://plus.google.com/+myApp/posts" target="_blank">Google +</a> for the latest details. Oh, and tell your friends!</p>
</div>

一般来说，我建议在样式标签中编写样式，然后在完成并准备内联样式以支持 gmail 时使用http://inliner.cm 之类的服务。这样您就不必自己复制和粘贴字体系列和默认样式

使用建议的方法在头部的 <style> 标记中设置 html 电子邮件的样式，然后使用内联，您实际上也可以重新使用 ink 框架，并且仍然可以在 gmail 中使用。

【讨论】：

【解决方案2】：

将此添加到您的<style> 标签：

body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}

width/padding/margin/ms-text is 明显不相关，但应该也有。

此外，iPhone 使用 webkit 进行渲染，因此您应该能够通过在 <style> 标记中添加一个类来手动覆盖样式。 Gmail 当然会忽略这一点。

【讨论】：

感谢您的回复。我尝试了这种方法，不幸的是，它没有用。 iPhone 上的电子邮件文本仍然显得很小且没有缩放。我查看了您的样式标签中的信息。但是，我看不出它与我定义的内联内容有何不同。除了宽度上的 !important 属性。即使在添加之后，文本仍然没有正确缩放。谢谢你的回复。您还有其他想法吗？
你是对的 - 对不起，我错过了你身体标签中的内容。不知道你在你的OP中挤在一起是什么意思。它只是呈现比在 Gmail 中小吗？它可能是<div> 的，但我怀疑它对于Mac 来说。只是为了排除，尝试像这样包装你的文字<font style="font-size:14px;">text</font>这有什么不同吗？

【解决方案3】：

试试这个：

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

如果我没记错的话，iPhone 会自动缩放电子邮件内容，除非通过添加 initial-scale=1.0 来告知不要这样做

希望对您有所帮助。我非常清楚电子邮件开发是多么令人沮丧。

【讨论】：

感谢您的尝试。不幸的是，这没有用:(

【解决方案4】：

嘿，伙计，我没有看到你的代码，但最近我通过添加修复了我的时事通讯

-webkit-text-size-adjust:none;

你的 td 风格

我遇到了同样的问题。

尝试一下可能是问题所在。

【讨论】：

【解决方案5】：

这周我遇到了同样的问题并尝试了很多代码。唯一有效的解决方案是将此行添加到您的 <style>:

<style>
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
</style>

【讨论】：