2013-07-10 168 views
0

我想創建一個HTML電子郵件通訊,我必須通過使用媒體查詢替換另一個圖像。它適用於桌面客戶端,我可以看到圖像發生了變化,但在手機上,圖像根本不顯示。HTML電子郵件圖像不顯示在移動電子郵件客戶端

有沒有人有這方面的經驗?

header_mobile is display:none;媒體查詢之外,ofc。

HTML:

<td id="header" align="center" > 
     <a href="http://ezzence.dk"> 
      <img src="http://www.thomasteilmann.com/nyhedsbrev/img/header.jpg" alt="Ezzence Nyhedsbrev" /> 
     </a> 
</td> 
<td id="header_mobile" align="center" > 
     <a href="http://ezzence.dk"> 
      <img src="http://www.thomasteilmann.com/nyhedsbrev/img/mobile/header.jpg" alt="Ezzence Nyhedsbrev" /> 
     </a> 
</td> 

CSS:

#header_mobile{ 
    display: table-cell; 
} 

#header{ 
    display: none; 
} 
+0

您試過哪些手機上的電子郵件客戶端? –

+0

股票android 4.0和ihpone 4股票客戶端 –

+0

當我在我的瀏覽器中檢查(手動調整大小),那麼它工作得很好 –

回答

2

iPhone和Android的4默認客戶端支持媒體查詢,所以這不是問題。它只是看起來像你的媒體查詢沒有解僱。

不知道你有你的媒體查詢設置,但是這應該能正常運行這些設備:

@media only screen and (max-width: 479px) { display:table-cell !important; } 

不要忘了重要的部分!最大設備寬度和最大寬度之間也有差異,因此只需檢查每個設備的範圍。

+0

非常感謝。有時候,這是你漫長的一天後忽略的小事情:) –

相關問題