Question

虽然尝试创建一个在视网膜显示设备上看起来很好的响应式电子邮件，但我发现Outlook并不尊重指定的图像标准并将其显示为源尺寸。

对于概念验证（POC），我创建了横幅图像为1200x400，因此在电子邮件中，它将在移动设备上扩展为600x200和300x100。听起来不错吧？

嗯，在Outlook中，它显示为1200px宽，并且我似乎无能为力。这是导致可怕的Outlook电子邮件的JSFiddle： http://jsfiddle.net/hirenshah/rdux8vkg/11/

HTML：

<body bgcolor="#C0C0C0">
    <!--[if (mso)|(IE)]>
        <table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td>
                <![endif]-->
                <table class="container" width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px; background-color: white; margin-left: auto; margin-right: auto;">
                    <tr>
                        <td>
                            <!-- Header Table Start -->
                            <table width="100%" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td class="alignrightonmobile">
                                        <img src="http://hirenshah.co.uk/poc/logo.png" width="100px" height="75px" />
                                    </td>
                                </tr>
                            </table>
                            <table width="100%" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>Quote Reference ABC123456</td>
                                </tr>
                            </table>
                            <table width="100%" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <img class ="banner" src="http://hirenshah.co.uk/poc/banner.png" style="width:auto; max-width:100%;height:auto"/>
                                    </td>
                                </tr>
                            </table>
                            <!-- Header Table End -->
                            <!-- Body Table Start -->
                            <!-- Body Table End -->
                        </td>
                    </tr>
                </table>
                <!--[if (mso)|(IE)]>
                </td>
            </tr>
        </table>
    <![endif]-->
</body>

CSS：

@media screen and (min-width: 601px) {
    .container {
        width:600px !important;
    }
    .headercolumnright {
        text-align:right !important;
    }
    * {
        font-family: Verdana;
        color:blue !important;}
    .alignrightonmobile {text-align:right !important;}
}
.headercolumnleft {
    width: 300px;
    display: block;
    text-align:left;
    float: left;
    font-size:12pt;
}
.headercolumnright {
    width: 300px;
    display: block;
    text-align:left;
    float: right;
    font-size:12pt;
}
div {
    outline: 1px solid red;
}
    * {
        font-family: Verdana;
        color:red;}

.alignrightonmobile {text-align:left;}

img.resize {
    width:auto;
    max-width:100%;
    height:auto;
}

Answer 1

Outlook在所有热门客户端中提供了一些最有限的CSS支持：https://www.campaignmonitor.com/css/

考虑到这一点，您可以更轻松地构建电子邮件以使用Outlook，并使用CSS为所有其他客户端进行改进。

关于解决您的特定问题，首先应在img标记中使用的图像针对Outlook进行优化，宽度为600px。

然后，我们可以使用CSS在包含图像的td上设置背景图像，以便您可以为支持它的设备加载正确的图像，您还希望使用CSS来隐藏使用媒体规则在这些设备上的td标记内的图像。

带有图像的Outlook HTML电子邮件

1 个答案: