如何在 html 电子邮件模板中覆盖 gmail 视口？答案

【问题标题】：How to override gmail viewport in html email template?如何在 html 电子邮件模板中覆盖 gmail 视口？
【发布时间】：2017-09-05 07:04:32
【问题描述】：

我用 php 开发了一个约会网站，它也有移动版本。我设计了一个 html 电子邮件模板并将其存储在一个文件夹中，其中包含我将在发送电子邮件时替换的 php 变量。我在这里要做的是，当从我的网站发送的任何电子邮件在移动设备中打开时，它不应该有缩放电子邮件的选项。在我的电子邮件模板中，我将在代码下方。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />

如果我在手机浏览器中查看电子邮件模板，它没有缩放选项，但如果我在 gmail 应用程序中查看电子邮件，我可以缩放电子邮件。

请告诉我如何停止 Gmail 中的缩放功能。提前致谢。

<html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />
        </head>
        <body style="-webkit-text-size-adjust:none;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#000000; height:52px;">
                <tr>
                    <td align="center">
                        <center>
                            <table border="0" cellpadding="0" cellspacing="0" width="600px" style="height:100%;">
                                <tr><td align="left" valign="middle" style="padding-left:20px;"><a href="SITENAME"><img src="SITENAME/images/logo.png" /></a></td></tr>
                            </table>
                        </center>
                    </td>
                </tr>
            </table>
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tbody>
                    <tr>
                        <td>
                            <center>
                                <table style="height:100%;" width="600px" cellspacing="0" cellpadding="0" border="0">
                                    <tbody>
                                        <tr>
                                            <td style="padding-left:20px; padding-bottom:20px" valign="bottom" align="left">
                                                    <div style="color: #444444; font-family: Open Sans; font-size: 15px; line-height: 150%;text-align: left;">
                                                    {{EMAILCONTENT}}    
                                                    </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </center>
                        </td>
                    </tr>
                </tbody>
            </table>
        </body>
    </html>

【问题讨论】：

您有一些代码供我们查看吗？
请看我的问题。我添加了电子邮件模板代码

标签： javascript php html css email

【解决方案1】：

将此代码与电子邮件内容一起放在您的 DIV 上，在其中声明字体系列、字体大小等。

.no-zoom {
  touch-action: manipulation;
}

【讨论】：

我应该把这个放在哪里？
感谢您的回答先生。但我没有使用 div。请检查上述问题中的电子邮件模板。我已经更新了。
@user3327608 是的，您正在使用 DIV 检查：
{{EMAILCONTENT}}