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>

这适用于大多数邮件客户端，但不适用于不支持显示的Gmail：无＆＃39;没有＆＃39;！important＆＃39;。但是，将！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>

隐藏Gmail HTML电子邮件中的内容 - 但是在移动版中显示？

2 个答案: