Gmail移动端浏览器客户端无法渲染style标签的解决方案求助

问题原因 #

Gmail移动端网页客户端默认会过滤移除<head>标签内嵌入的所有<style>标签，因此你写在头部的媒体查询样式不会生效。

可行解决方案 #

你可以通过以下调整实现类名控制移动端隐藏的需求，无需使用行内样式：

• 将<style>标签整体从<head>迁移到<body>标签的最开头位置，Gmail移动端网页不会过滤<body>内部的<style>标签
• 额外补充属性选择器写法的样式规则，避免部分Gmail版本自动修改类名后缀导致样式匹配失效

调整后的完整代码 #

<!doctype html>
<html>
<head>
</head>
<body>
  <!-- style移到body开头 -->
  <style>
    @media only screen and (max-width:768px) {
      .hide-mobile,
      [class*="hide-mobile"] {
        display: none !important;
      }
    }
  </style>
  <table class="hide-mobile">
    <tr>
      <td>
        Mobile
      </td>
    </tr>
  </table>
</body>
</html>

兼容提示 #

• 不要在类名中使用特殊字符、大写字母，避免Gmail自动过滤类名
• !important声明需要保留，覆盖Gmail客户端默认给表格元素添加的样式规则

内容的提问来源于stack exchange，提问作者Lucas Besen