隱藏Gmail HTML電子郵件中的內容 - 但顯示在手機中？

我正在嘗試構建一個響應式HTML電子郵件。我試圖做一些相當簡單的事情，但陷入困境並開始相信我可能需要以不同的方式來處理它。隱藏Gmail 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這確實不支持'顯示：無'沒有'！重要'。但是，將重要內容添加到內聯樣式意味着它不會顯示爲移動設備。

我已經嘗試了幾個不同的東西，包括與可見性/不透明度混合（認爲這將是一個正確的方向開始，但根本不起作用）並試圖通過嘗試潛入內聯樣式：

在頭上的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>

但是，這也不能工作。看起來這將是一個很常見的問題。

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

來源

2014-12-02 amlyhamm

啊軟件開發的美麗：我們得到的只是不斷嘗試，直到工作的事情！找到了解決辦法。似乎有不止一種方式來解決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>

來源

2014-12-02 21:59:25 amlyhamm

的Gmail條從內聯的所有CSS分開 – 2015-09-17 07:14:20

如何使用：

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

來源

2014-12-02 21:55:06 philipb3

隱藏Gmail HTML電子郵件中的內容 - 但顯示在手機中？

回答

相關問題