Question

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

简单（可点击或不可点击）图片
为桌面和移动设备使用不同的图片
与大多数热门电子邮件客户端兼容

此处发布的解决方案：A Slick, New Image Swapping Technique for Responsive Emails似乎是迄今为止最好的，但它有一个小问题，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>

＆＃34; img＆＃34;标签总是下载图像，即使它没有显示（显示：无）。

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

有人能帮忙吗？

JSFiddle

谢谢

Answer 1

对于桌面电脑和移动设备，没有办法使用不同的图像，也没有下载电子邮件的图像。绕过它需要Javascript，任何主要的电子邮件客户端都不支持。

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

Answer 2

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

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

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

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

Answer 3

这是可能的，有点，并且有点棘手。 Gmail可能是it strips out the <style> tag以来最大的障碍，因此不支持媒体查询。

首先，需要注意的一点是：Google Apps网络邮件+移动版Gmail会呈现相同的效果，但我们可以让常规的Gmail网络邮件与众不同。

Gmail会从所有元素中删除class和id属性，但保留其他一些属性：style，title，lang，width，height，{ {1}}，alt。 因此，我们可以使用href。

之类的内容定位常规Gmail网络邮件

因此，使用移动版Gmail作为您要展示的内容的基础，然后您可以通过将常规Gmail网络邮件定位为隐藏移动Gmail图片并显示常规Gmail网络邮件图片来覆盖常规Gmail网络邮件。

同样，这不适用于Google Apps网络邮件，它将与Gmail应用程序显示相同。

This article on Fresh Inbox说明了如何定位特定版本的Gmail。值得一读，如果你沿着这条路走下去并有疑问！

Answer 4

如果只有宽度为100％的图像怎么样？我尝试了它，它似乎适用于不同的宽度。我甚至尝试使用Chrome的响应模式，即使在那里它似乎适用于iphone大小的设备，尽管图像质量不那么尖锐。

<html>
<head>
    <title>ResponsiveImage</title>
</head>
<body>
    <img src="Tulips.jpg" width="100%">
</body>
</html>

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

4 个答案: