HTML 电子邮件图像未显示在移动电子邮件客户端上

Question

我正在尝试创建一个 html 电子邮件通讯，我必须使用媒体查询将一张图片替换为另一张图片。它适用于桌面客户端，我可以看到图像发生了变化，但在手机上，图像根本不显示。

有没有人有这方面的经验？

header_mobile 显示:无；在媒体查询之外，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; }

不要忘记 !important 部分。 max-device-width 和 max-width 之间也有区别，所以只需检查每个设备的范围。