隱藏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>

這對於大多數郵件客戶端而言效果很好，但不適用於不帶'！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>

但這也不起作用。 似乎這將是一個非常普遍的問題。

任何想法如何解決這個問題？

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>