Android 响应HTML电子邮件-Gmail添加类_Android_Html_Gmail_Html Email_Responsive

Android 响应HTML电子邮件-Gmail添加类

android html gmail

Android 响应HTML电子邮件-Gmail添加类,android,html,gmail,html-email,responsive,Android,Html,Gmail,Html Email,Responsive,我正在测试一个非常基本的响应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>

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


@媒体屏幕和屏幕（最大宽度：580像素）{
*[class=“mob column”]{float:none！重要；宽度：100%！重要；}
*[class=“hide”]{显示：无！重要；}
*[class=“100p”{宽度：100%！重要；高度：自动！重要；}
}
网站
查看此电子邮件时遇到问题？
|

因此类

mob column

应该堆叠表格单元格，而

hide

应该隐藏表格单元格。然而，Android上的Gmail却完全忽略了这一点

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

mob列

更改为

m1371211720454434058mob列

hide

更改为

m_1371211720454434058hide

我已经学习了关于Litmus（）的教程，我正在使用它进行测试

我的问题出在哪里？

据我所知，Gmail Android应用程序不支持媒体查询

我强烈建议您使用内联CSS代码，也许您应该尝试通过mailChimp使用CSS内联

我建议将您的mob column类更改为类似这样的

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

我们不再需要使用属性选择器，Gmail和Yahoo现在都支持标准的class&id选择器。

Gmail大约在一年前更新，增加了对嵌入式样式表和媒体查询的支持。所以现在一切都好了，我认为显示块丢失了一个遗嘱，导致它不会破裂。