HTML电子邮件 - 桌面和移动设备的不同图像

Question

我想我已经尝试了所有可能的现有解决方案,所以我在这里询问是否有人知道什么是显示的最佳方式:

• 简单(可点击或不可点击)图像
• 为桌面和移动设备使用不同的图像
• 兼容最流行的电子邮件客户端

这里发布的解决方案:响应电子邮件的Slick,新图像交换技术似乎是迄今为止最好的,但它有一个小问题,2个图像总是下载(我不是说显示),要么你在移动设备上或桌面.

<a href="http://www.emailonacid.com">
  <span id="switcher">
    <img id="houdini" src="http://www.sample.com/desktop.jpg" alt="">
  </span>
</a>

 <style>
  @media only screen and (max-device-width: 489px) {
    span[id=switcher] {
      display:block;
      background-image: url(http://www.sample.com/mobile.jpg) !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      width: 300px !important;
      height: 250px !important;
    }
    img[id=houdini] {display: none !important;}1
  }
</style>

"img"标签总是下载图像,即使它没有显示(显示:无).

我已经尝试了许多其他方法,使用桌面上的背景图像,但这似乎需要微软的VML代码,解决方案看起来非常混乱,有时甚至没有在Android上工作.

有人能帮忙吗？

的jsfiddle

谢谢

Answer 1

没有办法为桌面和移动设备提供不同的图像,也没有为电子邮件下载这些图像.绕过它需要Javascript,任何主要的电子邮件客户端都不支持.

我还想指出,在某些主要邮件应用程序(尤其是Gmail)上,不支持使用哪种方法进行图像交换.从设计的角度来看,最佳做法是将相同的图像用于桌面和移动设备.

Answer 2

正如其他人所提到的,隐藏图像永远不会稳定.我的解决方案是创建一个小型服务器端脚本,为不同的设备提供不同的图像.我认为这是最稳定,最强大的解决方案.

您可以从请求的标题中识别操作系统,设备和屏幕宽度,但任何浏览器/电子邮件客户端都可以发送虚假信息.

我们使用这个包解析用户代理信息:https://www.npmjs.com/package/ua-parser ,我们可以用它来获取这些信息:https: //github.com/EDMdesigner/supertracker/blob/master/车型/ session.js

根据设备字段,您可以提供不同的图像.