Question

我正在测试一个非常基本的响应式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进行测试。

我在哪里错了？

Answer 1

我建议您将mob-column类更改为此类

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

我们不再需要使用属性选择器，Gmail和Yahoo都支持标准类和id选择器这些天。

Answer 2

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

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

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

2 个答案: