css - 隐藏移动电子邮件客户端的内容并在桌面上显示(不读取媒体查询)？

Question

我正在尝试寻找一种尽可能可靠的方法来隐藏移动电子邮件客户端的内容。

理想情况下，解决方案将默认对不读取媒体查询的设备隐藏内容，但会在也不读取媒体查询的桌面客户端上显示内容。

现在，我使用从另一篇文章派生的代码来隐藏内容，然后使用媒体查询将其重新打开。我见过很多reverse posts这里提供了在桌面上隐藏内容的解决方案，这很有帮助。

我当前解决方案的问题是:

• 即使查询中的“display: block !important”具有 !important 声明，Gmail 桌面版内容也不会显示
• 这不适用于 Outlook 2003 或更低版本，因为它们不读取媒体查询
• 不适用于桌面版雅虎和 AOL Mail，因为我相信它们不会读取媒体查询

在移动设备上隐藏内容的包装 div:

  <div class="desktop" style="width:0; overflow:hidden;float:left; display:none">

当前媒体查询覆盖以打开平板电脑、台式机的内容:

@media 仅屏幕和(最小宽度:768px){

 .desktop {
  display : block !important;
  width : auto !important;
  overflow : visible !important;
  float : none !important;
 }

Answer 1

Gmail 不支持样式标记，因此媒体查询将不起作用。 all of these clients 也是如此(您提到了其中一些)。

有一些技巧可以让您通过使用其他客户端不支持的 CSS 来定位某些特定客户端(对于 Outlook，还有 mso tags)。对于桌面与移动设备，您几乎陷入了媒体查询的困境，而媒体查询本身并不完全支持。

正如您在问题中链接的那样，您可以尝试 max-width 和/或 min-width 媒体查询的组合。您could also try在媒体查询中使用device-pixel-ratio来隔离设备。除非您想使用 float 或流体布局，否则这几乎就是您必须使用的全部内容。

根据 CM's CSS support chart

CSS display 在 Gmail 中不受支持(完整的pdf)，但如果它实际上隐藏了您的内容，由于缺乏样式标签支持，您将无法覆盖内联声明。无论如何，其他非样式标签支持的客户端都会存在此问题......

这并不是一个真正的解决方案，但我希望这能澄清一些问题。