为什么移动设备的内部 CSS 不能在 gmail 中工作？答案

【问题标题】：Why doesn't internal CSS for mobile work in gmail?为什么移动设备的内部 CSS 不能在 gmail 中工作？
【发布时间】：2017-06-27 07:04:21
【问题描述】：

我正在从 php 文件向 gmail 帐户发送电子邮件。我拥有的代码是基本的 HTML 和 CSS。电子邮件在桌面上看起来不错，它具有所有样式，但在移动设备（应用程序和浏览器）中，样式没有出现，内部 CSS 似乎正在被删除。

我什至尝试了谷歌的示例代码：

<html>
  <head>
    <style>
      .colored {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
      @media screen and (min-width: 500px) {
        .colored {
          color:red;
        }
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Hi Pierce,</p>
      <p class='colored'>
        This text is blue if the window width is
        below 500px and red otherwise.
      </p>
      <p>Jerry</p>
    </div>
  </body>
</html>

这些是我发送的标头：

$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "From: Optimization Manager <server07@host.secure-serve3.com>" . "\r\n" .
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

但即使这样也行不通。

有什么想法吗？

【问题讨论】：

Gmail 几乎剥离了所有内容。此外，内联样式在电子邮件模板中更可取。更多信息：campaignmonitor.com/blog/email-marketing/2016/10/…
也许我读错了，但是在您发送的链接中，他们基本上说您可以拥有内部 CSS，并且他们现在剥离的内容比以前少得多？
这是我从中获取代码的地方，他们自己说它可以做到这一点，甚至举个例子，它似乎对我不起作用developers.google.com/gmail/design/css
您在什么设备上测试移动版？
多个，在 iphone（gmail 应用）、android（gmail 应用）和桌面移动版 gmail 上

标签： html css google-schemas

【解决方案1】：

应用这可能有效，因为我的系统工作正常并且还清除缓存，如果仍然出现问题，请告诉我

<!DOCTYPE html>
<html>

<head>
  <title>sdb</title>
  <style>
    .colored {
      color: red;
    }
    
    #body {
      font-size: 14px;
    }
    
    @media screen and (max-width: 500px) {
      .colored {
        color: blue;
      }
    }
  </style>
</head>

<body>

  <div id='body'>
    <p>Hi Pierce,</p>
    <p class='colored'>
      This text is blue if the window width is below 500px and red otherwise.
    </p>
    <p>Jerry</p>
  </div>

  </script>
</body>

</html>

【讨论】：

谢谢，但这并没有帮助，我清除了缓存并添加了您的代码，但移动端仍然没有样式