HTML電子郵件圖像不顯示在移動電子郵件客戶端

Question

我想創建一個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; 
} 

Answer 1

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

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

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

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