2

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

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

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

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

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

Wrapper div 在移动设备上隐藏内容：

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

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

@media only screen and (min-width: 768px) {

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

1 回答 1

2

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

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

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

根据 CM 的CSS支持图表display（完整 pdf）， Gmail 中不应该支持CSS ，但如果它实际上隐藏了您的内容，由于缺少样式标签支持，您将无法覆盖内联声明。无论如何，其他非样式标签支持的客户端都会出现此问题...

不是真正的解决方案，但我希望这能澄清一些事情。

于 2013-09-12T14:00:46.687 回答