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

Question

我正在尝试构建一个响应式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>

这适用于大多数邮件客户端，但不适用于不支持"display：none"而不带"！important"的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>

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

有什么想法可以解决这个问题吗？

Answer 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>

Answer 2

如何使用：

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