响应式 HTML 电子邮件 - Gmail 添加课程答案

【问题标题】：Responsive HTML email - Gmail adding classes响应式 HTML 电子邮件 - Gmail 添加课程
【发布时间】：2017-11-17 10:40:06
【问题描述】：

我正在测试一个非常基本的响应式 HTML 电子邮件模板，而 Gmail (Android) 忽略了媒体查询。

这是我非常基本的测试标记：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="format-detection" content="telephone=no">
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
  <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
  <style type="text/css">@media screen and (max-width:580px) {
    *[class="mob-column"] {float: none!important; width: 100%!important;}
    *[class="hide"] {display:none!important;}
    *[class="100p"] {width:100%!important; height:auto!important;}
  }</style>
  <title>Website</title>
</head>

<body>
  <table class="100p" width="100%" cellpadding="10" cellspacing="0" bgcolor='#ffffff'>
    <tr>
      <td valign="top" align="center">
        <table class="100p" width="650" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
          <tr>
            <td class="mob-column" width="325" align="left" valign="middle">
              <img src="https://www.website.com/img/logo.png" alt="website" width="200" height="26" border="0"/></td>
            <td class="hide" width="325" valign="middle" align="right">
              <span style="font-size:12px;color:#c5c5c5;font-family:Helvetica,Arial,sans-serif;">Having trouble viewing this email? <a style="color:#666666; text-decoration:none;" href="#">click here</a></span>
            </td>
          </tr>
          <tr>
            <td class="mob-column" align="left" valign="middle" colspan="2" height="30" style="padding-left: 15px;">
              <span style="font-size:12px; font-family:Helvetica,Arial,sans-serif;"><a style="color:#c5c5c5; text-decoration:none;" href="tel:111111111">111111111</a><span style="color: #c5c5c5;">&nbsp;|&nbsp;</span><a style="color:#c5c5c5; text-decoration:none;" href="tel:111111111">111111111</a></span>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

所以mob-column 类应该堆叠表格单元格，hide 应该隐藏表格单元格。然而，这在 Android 上的 Gmail 中被完全忽略了。

当我在桌面上检查 Gmail 中的 HTML 时，我可以看到类已被更改为：

mob-column 改为m_1371211720454434058mob-column hide改为m_1371211720454434058hide

我已经学习了有关 Litmus (https://litmus.com/community/learning/24-how-to-code-a-responsive-email-from-scratch) 的教程，并且正在使用 https://putsmail.com 进行测试。

我哪里错了？

【问题讨论】：

标签： android html gmail html-email responsive

【解决方案1】：

我建议将你的 mob-column 类更改为类似的内容

.mob-column {width: 100% !important; display: block !important}

我们不再需要使用属性选择器，而且 Gmail 和 Yahoo 现在都支持标准的类和 ID 选择器。

【讨论】：

我认为显示块缺少一个导致它不会损坏的遗嘱。

【解决方案2】：

据我所知，Gmail Android 应用不支持媒体查询https://litmus.com/help/email-clients/media-query-support/

我强烈建议您使用内联 CSS 代码，也许您应该尝试通过 mailChimp https://templates.mailchimp.com/resources/inline-css/ 使用 CSS 内联

【讨论】：

Gmail 大约在一年前更新，增加了对嵌入式样式表和媒体查询的支持。现在一切都好