时间戳

首页 > 解决方案 > 如何使 Outlook 电子邮件签名响应

email - 如何使 Outlook 电子邮件签名响应

问题描述

我正在为需要响应的客户设置新的电子邮件签名。

我尝试了一种布局，其中包括 div、tables 等，它在台式机上效果很好，但在手机上效果不佳。

下面是一个这样的示例，但电子邮件看起来与桌面和移动相同，其中单元格/div 在另一个下移动。

作为我研究的一部分，我尝试使用这个以相同方式结束的电子邮件样板。- https://github.com/seanpowell/Email-Boilerplate

<!--[if gte mso 9]>
    <table cellspacing=0><tr><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
    <strong>Administrator</strong><br>Phone {qwfqwfcqwdqwfqfgqwfqwbfjqnwjkfqnwjfbqiwnf qwnfiquwnqwnfiqnwifjnqwfinqwifnqwjinfqjiwnfijqwnf}<br>Email <a href="mailto:{E-mail}" style="color: #fff; text-decoration: none;">{qwfqwfqwcqwfqwfqwfdqwcrqwrqwcrqwrqwrcqwrxqwrqwcxqrwqxrqwxqwx}</a>
</div>
<!--[if gte mso 9]>
    </td><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
    <strong>qwfqwfqwdqw fqwfqwfqwdfqwdqwfqwfqwdqwdqwdqw</strong> ​
</div>
<!--[if gte mso 9]>    
</td></tr></table>
    <![endif]-->

https://jsfiddle.net/623y57p1/1/

看看我制作的演示。这在浏览器中是响应式的，但不是在 Outlook 中。

标签： emailresponsive-designoutlooksignature

解决方案

我创建了一个适用于 Outlook 的示例代码。如果查看窗口宽于 580 像素，则此电子邮件页脚的两列将并排显示。如果它低于该宽度，它将恢复为两个堆叠的列。您可以通过调整来设置宽度断点<td width="290">。

<table align="center" role="contentinfo" cellspacing="0" cellpadding="0" border="1" width="100%" style="margin: 0 auto;">
  <tr>
    <td width="290" style="direction: ltr !important; display: inline-block;">
      Column A
    </td>
    <td width="290" style="direction: ltr !important; display: inline-block;">
      Column B
    </td>
  </tr>
</table>

请记住一些注意事项：

  • Outlook 2007-2019 不支持响应式电子邮件。不支持 @media查询。

  • 的宽度table必须设置为<table width="100%">。

  • 表格单元格的宽度为 290，因为 Outlook 查看窗口的最大宽度为 580 像素。

  • <table border="1">出于演示目的，您可以关闭It's on。

  • <table role="contentinfo">支持屏幕阅读器。请留下它以帮助视障用户了解您的电子邮件的结构。

  • https://jsfiddle.net/wallyglenn/w0s4xmc0/60529/

祝你好运。

推荐阅读