在桌面和移动设备上切换图像以获取电子邮件 |邮递

Question

我们正在改用 Mailjet API 发送电子邮件。我们现在面临的一个问题是：我们正在为 html body 使用 apache velocity 模板，我们在 html 的 src 标签中提供图像 url。但是我们有不同的桌面图像，mobile/ipad 出于显而易见的原因（图像大小等）

我们如何确定何时在客户端设备上呈现电子邮件要呈现哪个横幅。 mailjet 是否有任何切换图像功能？

提前致谢。

Answer 1

如果您需要交换图像，而不仅仅是缩小图像 (style="width:100%;height:auto;")，响应方式如下：

将此添加到您的 <head> 部分：

<style>
    @media screen and (max-width:620px) {
        .image_mobile {
            display:block!important; max-height: none !important; max-width:none !important; line-height: 1.5 !important;width:100%!important; height:auto!important;
        }
        .hide {
            display:none!important; width:0px!important; height: 0px!important; overflow:hidden!important; line-height: 0px!important; font-size:0px!important;
        }
    }
</style>

并将其放入您的内容中：

<img border="0" width="xxx" src="xxx" alt="xxx" style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;width:100%;height:auto;" class="hide">
<!--[if mso]><!-->
<div style="display:none; font-size:0; line-height:0;  max-height: 0; max-width: 0; width:0;" class="image_mobile">
    <img border="0" width="xxx" src="xxx" alt="xxx" style="display:none; font-size:0; line-height:0;max-height: 0; max-width: 0; width:0; -ms-interpolation-mode: bicubic;" class="image_mobile">
</div>
<!--<![endif]-->

默认显示第一张图片（桌面；网络邮件；不支持@media 的）。但是大多数移动应用程序都支持@media，因此会隐藏第一张图片并显示第二张。

（因此，它不是 Mailjet 的功能，而是您的代码）

在桌面和移动设备上切换图像以获取电子邮件 |邮递

Switch Image on Desktop and Mobile for email | Mailjet

email

velocity

html-email

mailjet

velocity-template-language