隐藏 Gmail HTML 电子邮件中的内容 - 但在移动设备中显示？答案

【问题标题】：Hide content in Gmail HTML email - but display in mobile?隐藏 Gmail HTML 电子邮件中的内容 - 但在移动设备中显示？
【发布时间】：2014-12-02 21:36:05
【问题描述】：

我正在尝试构建响应式 HTML 电子邮件。我正在尝试做一些相当简单的事情，但被卡住了，我开始相信我可能需要以不同的方式来处理它。

如果用户在移动设备上，我想显示某些内容，否则将其隐藏。

我的第一次尝试是这样的：

头部的 CSS：

@media (max-width: 420px) and (min-width: 100px) {
    .mobile {
        display:block !important;
    }
}

HTML：

<div class='mobile' style='display:none;'>
  I'm only visible on mobile :)
</div>

这适用于大多数邮件客户端，但不适用于不支持没有“！important”的“display:none”的 Gmail。但是，将 !important 添加到内联样式意味着它不会在移动设备上显示。

我尝试了一些不同的方法，包括弄乱可见性/不透明度（认为这将是一个正确方向的开始，但那根本不起作用）并试图通过尝试绕过内联样式：

头部的 CSS：

.mobile {
    display: none !important;
}

@media (max-width: 420px) and (min-width: 100px) {
    #fix .mobile {
        display:block !important;
    }
}

HTML：

<div id='fix'>
    <div class='mobile' style='display:none;'>
       I'm only visible on mobile :)
    </div>
</div>

但这也没有用。似乎这将是一个非常普遍的问题。

任何想法如何解决这个问题？

【问题讨论】：

标签： html css html-email

【解决方案1】：

啊，软件开发的美妙之处：我们可以不断尝试，直到一切顺利！找到了解决办法。似乎有不止一种方法可以绕过 Gmail 的display: none（内联样式的!important 不是唯一的方法）。这对我有用：

头部的 CSS：

.mobile {
    display: none;
    font-size: 0;
    max-height: 0;
    line-height: 0;
    padding: 0;
}

@media (max-width: 420px) and (min-width: 100px) {
    .mobile {
        display:block !important;
        line-height: 1.5 !important;
        max-height: none !important;
    }
}

HTML：

<div class='mobile' style='display:none;font-size: 0; max-height: 0; line-height: 0; padding: 0;'>
  I'm only visible on mobile :)
</div>

【讨论】：

gmail 将除内联之外的所有 css 剥离

【解决方案2】：

如何使用：

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

【讨论】：