HTML电子邮件-桌面和移动设备的不同图像
我想我已经尝试了所有可能的现有解决方案，所以我想问一下，是否有人知道显示以下内容的最佳方式：HTML电子邮件-桌面和移动设备的不同图像,html,css,email,html-email,Html,Css,Email,Html Email,我想我已经尝试了所有可能的现有解决方案，所以我想问一下，是否有人知道显示以下内容的最佳方式： 简单（可点击或不可点击）图像 为桌面和移动设备使用不同的图像 与最流行的电子邮件客户端兼容 这里发布的解决方案：似乎是迄今为止最好的，但它有一个小问题，这两个图像总是下载（我不是说显示），无论你是在手机上还是在桌面上 <a href="http://www.emailonacid.com"> <span id="switcher"> <img id="hou
- 简单（可点击或不可点击）图像
- 为桌面和移动设备使用不同的图像
- 与最流行的电子邮件客户端兼容
<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>
@仅介质屏幕和（最大设备宽度：489px）{
span[id=开关柜]{
显示：块；
背景图片：url(http://www.sample.com/mobile.jpg)！重要；
背景重复：不重复！重要；
背景位置：中心！重要；
宽度：300px！重要；
高度：250px！重要；
}
img[id=houdini]{display:none！重要；}1
}
谢谢对于桌面和移动设备，没有办法拥有不同的图像，也没有办法不下载它们作为电子邮件。这需要Javascript，这在任何主要的电子邮件客户端中都不受支持
我还想指出，图像交换，无论你使用哪种方法，在一些主要的邮件应用程序上都不受支持，尤其是Gmail。从设计的角度来看，最好的做法是在桌面和移动设备上使用相同的图像。这是可能的，有点困难。Gmail可能是自那以来最大的障碍，因此不支持媒体查询 首先，有一个警告：Google Apps webmail+Mobile Gmail将呈现相同的效果，但我们可以让常规Gmail webmail与众不同 Gmail从所有元素中删除class和id属性，但保留一些其他属性不变：
styletitlelangwidthheightalthref[lang~=“x-houdini”]{display:none！important；}解释如何针对特定版本的Gmail。如果你沿着这条路走下去，有问题，值得一读 正如其他人提到的，隐藏图像永远不会稳定。我的解决方案是创建一个小型服务器端脚本，为不同的设备提供不同的图像。我认为这是最稳定、最稳健的解决方案 您可以从请求的标题中识别操作系统、设备和屏幕宽度，尽管任何浏览器/电子邮件客户端都可能发送虚假信息 我们使用此包解析用户代理信息： 我们可以用它获取这些信息：
根据设备字段，您可以提供不同的图像。让图像宽度为100%怎么样？ 我试过了，它似乎适用于不同的宽度。 我甚至尝试了chrome的响应模式，即使在iphone大小的设备上，它似乎也能工作，尽管图像质量没有那么清晰
<html>
<head>
<title>ResponsiveImage</title>
</head>
<body>
<img src="Tulips.jpg" width="100%">
</body>
</html>
响应图像