Question

我需要创建一个电子邮件模板。我的电子邮件模板必须适用于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的东西。有人可以帮帮我吗？

非常感谢你！

Answer 1

您实际上不能依赖于继承的样式，这意味着您必须始终将每个单独的样式应用于每个元素...... 这意味着div上的font-size实际上对其中的文本没有任何影响。

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

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

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

使用建议的方法在头部的<style>标签中设置html电子邮件的样式，然后使用内联器，您实际上可以回到使用墨水框架并仍然可以在gmail中使用它。

Answer 2

试试这个：

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

如果我没记错的话，iPhone会自动缩放电子邮件内容，除非另有说明不添加initial-scale=1.0

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

Answer 3

将此添加到您的<style>代码：

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

宽度/填充/边距/ ms-text明显不相关，但也应该在那里。

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

Answer 4

嘿伙伴我没看到你的代码，但最近我通过添加

修复了我的通讯

-webkit-text-size-adjust:none;

以你的td风格

我遇到了同样的问题。

尝试可能是问题。

Answer 5

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

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

在iPhone上的邮件应用程序中不缩放HTML电子邮件字体

5 个答案: