我在製作一個電子郵件,必須將圖像隱藏在桌面上並顯示在手機上。只有你可以做到這一點的方式是使用display none,這是gmail不支持的。有沒有一種方法可以在gmail中隱藏圖像以便構建HTML響應的電子郵件?
我想知道是否有任何其他方式隱藏桌面版本的圖像,以便我可以使用媒體查詢風格的移動版本的電子郵件。
的問題只是在Gmail
由於大部分
我在製作一個電子郵件,必須將圖像隱藏在桌面上並顯示在手機上。只有你可以做到這一點的方式是使用display none,這是gmail不支持的。有沒有一種方法可以在gmail中隱藏圖像以便構建HTML響應的電子郵件?
我想知道是否有任何其他方式隱藏桌面版本的圖像,以便我可以使用媒體查詢風格的移動版本的電子郵件。
的問題只是在Gmail
由於大部分
內嵌式的桌面:
style="max-height:0;width:0;"
響應CSS @media查詢:
max-height: none !important;
width: auto !important;
作品像魅力:)
hidden
不是display
的有效值。
嘗試:
{
display:none;
}
或者,如果仍然不行,請嘗試:
{
visibility:hidden;
width:0;
height:0;
padding:0;
margin:0;
}
噢對不起。我的意思是顯示沒有不能在Gmail上工作。可見性是支持更少的客戶..真的不能看到圍繞這一個的工作,而不是做它.. – MaxwellLynn 2013-03-05 13:27:51
在您的內嵌樣式的桌面,使圖像0
的width
和height
。然後使用您的響應式媒體查詢CSS將圖像恢復到適當的大小。
編輯:嘗試將mso-hide:all;
添加到您的內聯css以及修復問題與Outlook。
恐怕我已經試過這個和它的許多電子郵件客戶端它仍然會爆炸圖像無論其高度和寬度。這是一個恥辱。你知道其他方式嗎?謝謝 – MaxwellLynn 2013-03-05 15:40:29
我之前可靠地使用了這種方法。圖像和表格單元持有它被設置爲0. 我剛剛檢查了我的代碼,並且我也使用「mso-hide:all;」在表格單元格上。 – samanthasquared 2013-03-05 16:19:32
好的想法。還發現一篇文章與你在談論的其他人需要做同樣的事情相關。一個小問題.https://www.campaignmonitor.com/forums/topic/7405/how-to-hide-mobile-content- in-desktop-clients/ – MaxwellLynn 2013-03-05 16:27:47
爲了隱藏HTML電子郵件中的元素並使其在Gmail中工作,您需要將其清零並調整CSS中的大小(Gmail將忽略)。
像這樣:
<style>
@media only screen and (max-width: 480px) {
*[class~=show_on_mobile] {
display : block !important;
width : auto !important;
max-height: inherit !important;
overflow : visible !important;
float : none !important;
}
</style>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<!--[if !mso]><!-->
<td style="width: 0; max-height: 0; overflow: hidden; float: left;">
</td>
</tr>
<!--<![endif]-->
</table>
此外,增加的條件註釋涵蓋了你的Outlook 07.
聰明!很好地工作! – 2016-03-04 16:59:47