Css 从移动电子邮件客户端隐藏内容并在台式机上显示（不读取媒体查询）？

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

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

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

我目前的解决方案存在以下问题：

• 在Gmail桌面上，即使查询中的“display:block！important”具有以下属性，内容也不会显示！重要宣言
• 这不适用于Outlook 2003或更低版本，因为它们不读取媒体查询
• 不适用于雅虎和AOL桌面邮件，因为我相信他们不会阅读媒体查询

用于隐藏移动设备上内容的包装器div：

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

---

Gmail不支持样式标签，因此媒体查询将不起作用。（你提到了其中的一些）也是如此

这里有一些技巧，您可以通过使用其他客户端不支持的CSS（外加Outlook）来针对某些特定客户端。对于台式机和移动设备，您几乎被媒体查询所困扰，而媒体查询本身并不完全受支持

正如您在问题中所链接的，您可以尝试组合

max width

和/或

min width

媒体查询。您可以在媒体查询中选择

设备像素比率

，以隔离设备。除非您想使用浮动或流体布局，否则这几乎就是您必须使用的全部

根据（完整pdf），Gmail不支持CSS

display

，但如果它实际上隐藏了您的内容，您将无法覆盖内联声明，因为缺少样式标记支持。不管怎么说，其他非样式标记支持的客户端也会出现此问题

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

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