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

Question

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

我研究了 Gmail 媒体查询支持（它应该适用于 iOS）并且我还验证了我的 CSS。这是 style 标签中的 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 应用程序中工作。

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

希望这个答案有帮助。

Answer 2

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

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

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

可能的最佳解决方案是使用具有表布局的表：固定并且根本不进行媒体查询。