为什么 Gmail 会忽略我的媒体查询？ （在 iOS 上）

Question

我一直在调试和测试 Gmail 中的电子邮件模板。我使用 Zurb Foundation 作为基础（我也用它来内联我的大部分 CSS）。它到处看起来都很好，但 Gmail 完全忽略了我的媒体查询（soblue 类是测试它是网格还是媒体查询）。

我研究了 Gmail 媒体查询支持（它应该适用于 iOS），并且我还验证了我的 CSS。这是样式标签中的 CSS：

@media only screen and (max-width: 596px) {
.soblue {
 color: #0000FF !important;
}

.small-float-center {
    margin: 0 auto !important; float: none !important; text-align: center !important;
  }
  .small-text-center {
    text-align: center !important;
  }
  .small-text-left {
    text-align: left !important;
  }
  .small-text-right {
    text-align: right !important;
  }

  table.body img {
    width: auto; height: auto;
  }
  table.body center {
    min-width: 0 !important;
  }
  table.body .container {
    width: 95% !important;
  }
  table.body .columns {
    height: auto !important; box-sizing: border-box; padding-left: 16px !important; padding-right: 16px !important;
  }
  table.body .column {
    height: auto !important; box-sizing: border-box; padding-left: 16px !important; padding-right: 16px !important;
  }
  table.body .columns .column {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  table.body .columns .columns {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  table.body .column .column {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  table.body .column .columns {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  table.body .collapse .columns {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  table.body .collapse .column {
    padding-left: 0 !important; padding-right: 0 !important;
  }

  td.small-12 {
    display: inline-block !important; width: 100% !important;
  }
  th.small-12 {
    display: inline-block !important; width: 100% !important;
  }
  .columns td.small-12 {
    display: block !important; width: 100% !important;
  }
  .column td.small-12 {
    display: block !important; width: 100% !important;
  }
  .columns th.small-12 {
    display: block !important; width: 100% !important;
  }
  .column th.small-12 {
    display: block !important; width: 100% !important;
  }

  table.body table.columns td.expander {
    display: none !important;
  }
  table.body table.columns th.expander {
    display: none !important;
  }
  table.body .right-text-pad {
    padding-left: 10px !important;
  }
  table.body .text-pad-right {
    padding-left: 10px !important;
  }
  table.body .left-text-pad {
    padding-right: 10px !important;
  }
  table.body .text-pad-left {
    padding-right: 10px !important;
  }
  table.menu {
    width: 100% !important;
  }
  table.menu td {
    width: auto !important; display: inline-block !important;
  }
  table.menu th {
    width: auto !important; display: inline-block !important;
  }
  table.menu.vertical td {
    display: block !important;
  }
  table.menu.vertical th {
    display: block !important;
  }
  table.menu.small-vertical td {
    display: block !important;
  }
  table.menu.small-vertical th {
    display: block !important;
  }
  table.menu[align="center"] {
    width: auto !important;
  }
  table.button.small-expand {
    width: 100% !important;
  }
  table.button.small-expanded {
    width: 100% !important;
  }
  table.button.small-expand table {
    width: 100%;
  }
  table.button.small-expanded table {
    width: 100%;
  }
  table.button.small-expand table a {
    text-align: center !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important;
  }
  table.button.small-expanded table a {
    text-align: center !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important;
  }
  table.button.small-expand center {
    min-width: 0;
  }
  table.button.small-expanded center {
    min-width: 0;
  }
}
@media only screen and (max-width: 480px) {
  table#canspamBar td {
    font-size: 14px !important;
  }
  table#canspamBar td a {
    display: block !important; margin-top: 10px !important;
  }

}

如果您能看到我遗漏的内容，请告诉我。我对想法持开放态度。谢谢！

Answer 1

Gmail 在媒体查询方面非常挑剔。您在代码中犯了任何错误，整行都会被删除。乍一看，我发现代码中有空格，gmail 会忽略它。

目前：

@media only screen and (max-width: 596px) {

去掉冒号后面的空格试试看。制作它：

@media only screen and (max-width:596px) {

在确定我的样板后，我做了很多测试，但它还没有让我失望。

同样非常重要的是，Gmail 只会读取第一个媒体查询，因此如果您打算将媒体查询定位到 gmail，那么请将所有支持的媒体查询放在第一个查询中。如果您想使用更多，那么您可以使用它们来支持其他设备/电子邮件客户端。

更新：

以下代码将在 gmail 应用程序中运行。

<html>
  <head>
    <style>
      .colored {
        color: #000000;
      }
      #body {
        font-size: 26px;
      }
      @media only screen and (max-width:480px) {
        .colored {color: #ff0000 !important;}
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Hi Pirce,</p>
      <p class='colored'>
        This text is blue if the window width is
        below 500px and red otherwise.
      </p>
      <p>Jery</p>
    </div>
  </body>
</html>

希望这个答案有帮助。

Answer 2

制作电子邮件模板有一些您可能需要牢记的规则：

• 最好使用内联样式，而不是样式标签
• 流畅的布局，不响应，意味着避免使用媒体查询
• div 上的表格可能更难编码，但在不同的邮箱中显示效果会更好
• 像 1993 年一样编码，真的，这是您使用的最古老的标准，您更有可能避免进入垃圾邮件和布局问题

对于 Gmail，它具有固定的电子邮件显示空间分辨率，这就是为什么即使您移动宽度面板，它也不会缩小或扩大，因此忽略媒体查询。

可能的最佳解决方案是使用带有 table-layout:fixed 的表，并且根本不使用媒体查询。