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

时间:2013-07-10 10:44:15

标签: html css media-queries html-email

我正在尝试创建一个html电子邮件简报,我必须使用媒体查询将一个图像替换为另一个图像。它适用于桌面客户端,我可以看到图像被更改,但在手机上,图像根本没有显示。

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

header_mobile是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;
 }

1 个答案:

答案 0 :(得分:2)

iPhone和Android 4默认客户端都支持媒体查询,因此不是问题。看起来您的媒体查询似乎没有解雇。

不确定您的媒体查询设置为什么,但这应该适用于这些设备:

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

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