在移动设备上隐藏某些电子邮件元素答案

【问题标题】：Hide certain email elements on mobile在移动设备上隐藏某些电子邮件元素
【发布时间】：2014-06-07 09:52:21
【问题描述】：

我正在发送一封电子邮件，其中有一个巧妙的视觉元素，它依赖于能够突出显示文本。由于这在移动设备上实际上是不可能的，而且没有那种视觉效果看起来真的很尴尬，所以我想试着不在移动设备上显示这个元素。

据我所知，唯一的方法是使用@media 标签，据我所知，这不能以内联电子邮件友好的 css 方式完成。这是否可以通过其他方式实现？

如果相关，我正在使用 MailChimp，但我不确定是否会。

【问题讨论】：

您尝试移动媒体查询？ blog.mailchimp.com/using-media-queries-to-improve-readability
媒体查询可以在电子邮件中完成，就像任何其他带有 doctype 和 html/head/body 标签的 html 页面一样构建电子邮件。不确定您的群发邮件提供商是否支持。

【解决方案1】：

媒体查询肯定会通过 MailChimp 内联工作。基本上，您只需为要隐藏的元素分配一个类，例如“仅限桌面”，然后当浏览器宽度低于某个像素宽度时，将 CSS 规则应用于该选择器到 display:none。

@media only screen and (max-device-width: 480px) {
  .desktop-only {
     display:none;
  }
}

【讨论】：

【解决方案2】：

媒体查询在主要电子邮件客户端中有partial support。没有 100% 的技术可以针对所有客户端的所有移动设备。

如果您愿意，可以使用min-width 媒体查询在非移动平台上显示它，而不是使用max-width 媒体查询将其隐藏在移动设备上。这样它会默认隐藏在不支持媒体查询的客户端中。

另外，min-width 和 min-device-width 在调用它们时也有区别。大多数响应式电子邮件模板使用max-width。

【讨论】：