Question

我已经待了好几个小时了，在Outlook，Gmail，Gmail移动版上，电子邮件模板看起来很棒（台式机上为600px容器，移动设备上为全角）-但是iOS Apple Mail的表格容器不是全角，左对齐。

我将容器表居中，在body元素上添加了0填充和边距，并在头部添加了<meta name="x-apple-disable-message-reformatting">。

我无法弄清楚为什么电子邮件没有像在移动设备上那样响应-有任何想法吗？我正在尝试通过“附件”>“作为文本插入”>“发送”通过Outlook 2016发送此HTML电子邮件模板（也已通过Gmail发送测试）。

源代码：

<!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">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta name="x-apple-disable-message-reformatting">
  <title>Why u no responsive?</title>
</head>
<body style="padding: 0; margin: 0; background: #f2f2f2;">
<table class="container" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
 <tr>
  <td align="center" bgcolor="#ffffff">
 <img src="https://placehold.it/600x260" alt="Test" width="600" height="263" style="margin: 0; padding: 0; border: 0; display:block; width: 100%;" />
</td>
 </tr>
 <tr>
  <td bgcolor="#ffffff" style="padding: 40px 0px 0px 0px;">
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td style="text-transform: uppercase; text-align: center; color: #153643; font-family: 'Colibri', Arial, sans-serif; font-size: 24px;">
 <h1 style="margin-bottom: 0;"><b>Happy Holidays</b></h1>
 <p style="color: #ddd; font-size: 14px; letter-spacing: 5px;"><b>From Test Co</b></p>
</td>
 </tr>
 <tr>
  <td align="center" bgcolor="#ffffff">
 <img src="https://placehold.it/258x20" alt="Test" width="258" height="20" style="margin: 0; padding: 0; border: 0; display:block;" />
</td>
 </tr>
 <tr>
  <td align="center" bgcolor="#ffffff" style="padding: 40px 0 0px 0;">
 <img src="https://placehold.it/600x228" alt="Test" width="600" height="228" style="margin: 0; padding: 0; border: 0; display:block; width: 100%;" />
</td>
 </tr>
</table>
</td>
 </tr>
 <tr>
  <td bgcolor="#ffffff" style="padding: 0px 30px 20px 30px;">
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td style="padding: 20px 0 20px 0; color: #153643; font-family: 'Colibri', Arial, sans-serif; font-size: 16px; line-height: 20px;">
 <p style="text-align: center; text-transform: uppercase; color: #ddd; font-size: 14px; letter-spacing: 5px;"><b>Looking Ahead</b></p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.</p>
  </td>
 </tr>
 <tr>
  <td style="padding: 20px 0 20px 0; color: #153643; font-family: 'Colibri', Arial, sans-serif; font-size: 16px; line-height: 20px;">
 <p style="text-align: center; text-transform: uppercase; color: #ddd; font-size: 14px; letter-spacing: 5px;"><b>Tax Reform</b></p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.</p>
  </td>
 </tr>
</table>
</td>
 </tr>
 <tr>
  <td align="center" bgcolor="#ffffff" style="padding: 0px 0px 0px 0px;">
 <img src="https://placehold.it/600x228" alt="Test" width="600" height="228" style="margin: 0; padding: 0; border: 0; display:block; width: 100%;" />
</td>
 </tr>
 <tr>
  <td bgcolor="#15274b" style="text-align: center; padding: 30px 30px 0px 30px; color: #fff; font-size: 12px; font-family: 'Colibri', Arial, sans-serif;">
    <h2 style="margin-bottom: 0px;"><b>Bob Sagett, CFP&reg;</b></h2>
    <p>Registered Principal, Financial Advisor</p>
  </td>
</tr>
 <tr>
  <td bgcolor="#15274b" style="text-align: center; padding: 0px 30px 0px 30px; color: #fff; font-size: 12px; font-family: 'Colibri', Arial, sans-serif;">
    <p>1234 Street Dr. Suite 225, Los Angeles, CA 90210<br/>T <a style="color: #b4a69d;" href="#" target="_blank">123.456.7890</a> . F <a style="color: #b4a69d;" href="#" target="_blank">123.456.7890</a> . <a style="color: #b4a69d;" href="#" target="_blank">Maps &amp; Directions</a></p>
    <p><a style="color: #b4a69d;" href="https://www.facebook.com/" target="_blank"><img src="https://i.imgur.com/TIrXkya.jpg" alt="Facebook" /></a> <a style="color: #b4a69d;" href="https://twitter.com/" target="_blank"><img src="https://i.imgur.com/EopMAy2.jpg" alt="Twitter" /></a> <a style="color: #b4a69d;" href="http://www.linkedin.com/" target="_blank"><img src="https://i.imgur.com/x6Injwb.jpg" alt="LinkedIn" /></a></p>
  </td>
</tr>
 <tr>
  <td bgcolor="#15274b" style="padding: 30px 30px 30px 30px; color: #fff; font-size: 12px; font-family: 'Colibri', Arial, sans-serif;">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</td>
 </tr>
</table>
</body>
</html>

代码已经过测试并经过了w3验证-iOS Apple Mail可能带来什么想法？

电子邮件无响应或在iOS 12上居中

0 个答案: