Question

所以我上周一直在阅读有关如何编写响应式电子邮件的大量内容，并掌握基础知识 - 使用表格，使用内联样式，使用图像的百分比值（宽度：100％; max-width：Xpx，height：auto），甚至用于在Outlook中创建背景图像的v：rect hack。问题仍然是Outlook 2007,10和13不支持＆＃34; max-width＆＃34; css，尽管看到并尝试了许多在线声明为此找到了解决方法，包括Zurb Ink，但我的测试电子邮件在这些版本的Outlook中都没有响应。也就是说，除非为表提供百分比宽度，否则它们不会超出某个视口宽度。

我在某个地方找到了这个简单的建议：

<!--[if mso]>
 <center>
 <table><tr><td width="580">
<![endif]-->
 <div style="max-width:580px; margin:0 auto;">

 <p>This text will be centered and constrained to 580 pixels even on Outlook which does not support max-width CSS</p>

 </div>
<!--[if mso]>
 </td></tr></table>
 </center>
<![endif]-->

但我还没有在＆lt; p＆gt;中找到声明。标签是真的。在Outlook中，Outlook中的电子邮件表现得好像它是一个固定宽度的表，并且其中的内容既不会扩展也不会与视口一起崩溃（但在Outlook之外它会这样做）。我想知道是否有其他人在这种结构上取得了成功，或者是否存在针对Outlook最大宽度问题的确定的解决方法。

我们要发送的电子邮件并不复杂 - 基本上是一个1格宽的表，最大宽度为580像素，标题图像，每行包含文本或图像。有时背景图像覆盖全部或部分电子邮件。以下是我的基本代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="format-detection" content="telephone=no"> 
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
        <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
        <title>Test responsive email design</title>
    </head>

    <body bgcolor="#000" style="background-color:#000; color:#FFF; font-family: Calibri, Tahoma, Arial, Helvetica, sans-serif;">
        <![if gte mso 9]>
            <table width="100%"><tr><td>
             <center><table><tr><td width="580">
        <![endif]>

        <div style="max-width:580px; margin:0 auto; background-color:#000; color:#FFF;">
             <img src="http://lorempixel.com/580/200" width="100%" height="auto" align="center" style="width:100%; max-width:580px; height:auto;" />
             <p>The image above should never get wider than 580px, and should shrink proportionally when the viewport width is less than 580px. Here is some fluid text that also should never be wider than 580px, and should remain inside the viewport when the viewport width gets smaller than 580px.</p>
        </div>
        <![if gte mso 9]>
            </td></tr></table>
            </td></tr></table>
            </center>
        <![endif]>
     </body>
 </html>

Answer 1

我发现Outlook中无响应显示可能存在的问题。使用Zurb Ink，响应式html在包括IE在内的所有浏览器中都能很好地运行。但是，当我在Outlook中通过电子邮件发送给自己时，响应能力就会丢失。我打开电子邮件但没有响应，然后我点击了浏览器中的＃34;并且仍然没有响应。

然而，这显然与代码无关。电子邮件中的代码不受影响。如果我查看源代码，然后复制并粘贴到新的html文件中，并在浏览器中查看该文件，则响应性就在那里。如果我将该代码与原始的html代码进行比较，则没有区别。问题是当我选择＆＃34;在浏览器中查看＆＃34;在Outlook（2013）中，文件的URL是：C：\ Users \ Christophe \ AppData \ Local \ Microsoft \ Windows \ Temporary Internet Files \ Content.Outlook \ ZNCZG02D \ email（5）.mht 这当然不是一个html文件。好奇，如果Outlook中的设置将代码识别为html并将其呈现为html文件而不是mht文件。我会回来的。

这个响应式HTML电子邮件应该在Outlook中运行吗？

1 个答案: