根据所用设备的屏幕尺寸在电子邮件中加载图像

Question

我正在尝试根据查看者使用的屏幕尺寸在电子邮件中加载两个不同的图像。

我有一封 WordPress 忍者表单感谢邮件，我想发送它并在正文中显示图片。如果屏幕尺寸小于 501px 我想要显示图像如果它小于 500px 我想要显示不同的图像。两者的区别在于文字更少，更易于在移动设备上阅读。

我试过媒体查询，但它们不适用于电子邮件格式。我在测试 html 页面上使用了它们以确保我的代码正常工作并且它很好所以媒体查询可能不适用于电子邮件？

是否有其他方法可以根据查看电子邮件的屏幕大小更改图像？

这是我的代码：

HTML

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class='ourStory'>
    <img src='http://www.TheBetterSoftwareCompany.com/wp-
content/uploads/2015/04/ourstory-TBSC-edit3-mobile-copy.jpg' />
    </div>
</body>
</html>

CSS

@media all and (min-width: 501px) {
    div.ourStory{
     content:url('http://www.TheBetterSoftwareCompany.com/wp-
content/uploads/2015/04/ourstory-TBSC-edit3-copy.jpg');
    }
}

Answer 1

使用 <div> 无法正确甚至根本无法实现响应式电子邮件，您将需要使用 <table>

https://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/

像 mailchimp 这样的服务知道这些，并且有自己的内置工具来设计电子邮件。

http://templates.mailchimp.com/development/responsive-email/responsive-column-layouts/

我建议您使用像这样的库来为您的电子邮件完成更好的响应式设计。

http://zurb.com/ink/docs.php

示例代码：

<table class="container">
  <tr>
    <td>

      <table class="row">
        <tr>
          <td class="wrapper">

            <table class="eight columns">
              <tr>
                <td>

                  Eight Columns

                </td>
                <td class="expander"></td>
              </tr>
            </table>

          </td>
          <td class="wrapper last">

            <table class="four columns">
              <tr>
                <td>

                  Four Columns

                </td>
                <td class="expander"></td>
              </tr>
            </table>

          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

还有许多电子邮件提供商和客户端不支持链接 css，因此您必须依赖内联工具，它将 style="" 属性应用到您的 HTML 元素.

Answer 2

正如 link 所说，div 可以而且应该在电子邮件中使用，但复杂的布局需要表格。我个人认为组合是最好的课程，我将在下面的示例中使用它。

我突然想到的主要问题是您的样式表有一个 link 标记（几乎普遍不支持电子邮件客户端）并且您使用了更复杂的 CSS（内容： ) 在媒体查询上（也没有得到很好的支持）。

我使用 table 和 div 创建了一些代码，同时还更新了一些 css 等您上面的代码 - 包括 Outlook 条件语句。您可能需要跨客户端对此进行测试，但这是在电子邮件中进行图像交换的最佳且几乎唯一的方法。如果你想在较小的屏幕尺寸下再次切换它，你也可以在媒体查询中更改背景图像。

见下文：

 .ourStory { width:640px;}
 
 @media only screen and (max-width: 640px) {
 .ourStory { width:100% !important;}
 .image1 {display:none !important; visibility:hidden !important; overflow:hidden; width:0px !important; height:0 !important; line-height:0 !important;}
 .bgimage {width:100% !important; height:100px !important;}  
 }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;' name='viewport' />
    <title></title>
<style>
 
<!-- Inline Style Sheet Here -->

</style>
</head>

<body>
    <div class='ourStory' style="width:100%; max-width:640px;">
    <!--[if (gte mso 9)|(IE)]>
  <table width="640" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
<![endif]-->
<table class="ourStory" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:640px;">
<tr>
<td class="bgimage" background="http://placehold.it/639x100" bgcolor="#7bceeb" width="100%" height="150" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:639px; height:150px;">
    <v:fill type="tile" src="http://placehold.it/639x100" color="#7bceeb" />
    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  <![endif]-->
  <div><img class="image1" width="100%" src='http://placehold.it/640x150' style="border:none; display:block;" />
    </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>
    </tr>
    </table>
     <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
    </div>
</body>
</html>

根据所用设备的屏幕尺寸在电子邮件中加载图像

Loading Image in Email based on Screen Size of Device Used

html

css

wordpress

responsive-design

html-email