HTML 邮件签名设计 - 手机问题

Question

无法弄清楚如何编写可在移动和桌面电子邮件客户端上运行的 HTML 代码。现在它在桌面上运行良好，但每当我在移动设备上打开它时，它都会呈现奇怪 - 请参见下面的屏幕截图。

我已将它放入 Apple Mail 签名中，当我发送它并通过桌面 Apple 或 Gmail 打开时，它看起来很完美。

主要问题是，当在移动设备上打开电子邮件时，它的每一列（通过标签分隔）都在不同的行上。当我将 phone 水平翻转时，它会自动重新调整...这是否意味着 float:left 属性在移动设备上不起作用？我该如何调整？我需要指定宽度吗？不确定

我试过把整个东西变小，但没有用。我特意选择将其设置为 600 像素宽度，因为我看到另一个签名会自动调整大小以适应 600 像素的移动设备。

当我在 Google Chrome 中打开并使用切换设备时，它会重新格式化以完美适应移动屏幕。

在此先感谢您的帮助！

它在移动设备上的外观示例

代码如下：

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Email Signature</title>
</head>

<body>
  <div id="container">
    <div class="column" style="float:left; margin:0px; font-size:0px;">
      <img class="profile" src="http://hamptonyachts.com/uploads/Profile.png" alt="">
    </div>

    <div class="column" style="float:left; margin:0px; font-size:0px;">
      <img class="name" src="http://hamptonyachts.com/uploads/HYG_Robert_Fiala.png" alt="" style="vertical-align:top">

      <p class="contact" style="min-height: 60px; background-color: #06243f; font-family: Roboto; color: #FFFFFF; font-size: 15px; font-weight: 400; line-height: 18px; padding-left: 10px; padding-top: 10px; margin: 0px;">
        MOBILE: 425.765.7850 <br> OFFICE: 206.623.5200 <br>
        <span style=" font-size: 13px;">ROBERT@HAMPTONYACHTGROUP.COM</span></p>
    </div>

    <div class="column" style="float:left; margin:0px; font-size:0px;">
      <div class="news">
        <a href="http://hamptonyachtgroup.com/dealers/seattle/news/save-the-date-hyg-2018-rendezvous"><img class="news" src="http://hamptonyachts.com/uploads/Rendezvous.png" alt=""></a>
      </div>
      <div class="social">
        <a href="http://facebook.com/hamptonyachtgroup"><img src="http://hamptonyachts.com/uploads/Facebook1.png" alt="" style="vertical-align:top"></a>
        <a href="http://instagram.com/hamptonyachtgroup"> <img src="http://hamptonyachts.com/uploads/Instagram1.png" alt="" style="vertical-align:top"></a>
        <a href="http://hamptonyachtgroup.com"><img src="http://hamptonyachts.com/uploads/Web.png" alt="" style="vertical-align:top"></a>
      </div>
    </div>
  </div>


</body>

</html>

Answer 1

我不建议在电子邮件中使用 div。它们不适用于 Outlook。您的 div 没有以正确的方式配置，因此它们的行为不符合您的要求。例如，您没有在任何 div 或图像上声明宽度。

您的社交媒体图片未在 226 像素宽的 table 单元格中排列，这是您签名中未排列的原因之一。我不会花时间为您编辑它们，我只是让它们合身 width-wise 所以它们看起来很奇怪。

我在 Litmus 中对此进行了测试，它适用于 Apple、IOS、Android、Gmail、Outlook 等。我将 table 的背景变为红色以显示您仍需要修复的内容。您还应该填写您的 ALT 信息。

试试这个：

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Email Signature</title>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#ff0000">
  <tr valign="top">
    <td rowspan="2" width="115">
      <img class="profile" src="http://hamptonyachts.com/uploads/Profile.png" width="115" height="160" alt="Hampton">
    </td>
    <td width="259"><img class="name" src="http://hamptonyachts.com/uploads/HYG_Robert_Fiala.png" width="259" height="90" alt="" style="vertical-align:top">
    </td>
    <td width="226"><img src="http://hamptonyachts.com/uploads/Rendezvous.png" width="226" height="114" alt="">
    </td>
  </tr>
<tr valign="top"> 
  <td style="font-size: 12px;">MOBILE: 425.765.7850 <br />
  OFFICE: 206.623.5200 <br />
  ROBERT@HAMPTONYACHTGROUP.COM</td>
  <td><a href="http://facebook.com/hamptonyachtgroup"><img src="http://hamptonyachts.com/uploads/Facebook1.png" width="90" height="46" alt="" style="display:inline-block;" /></a>
    <a href="http://instagram.com/hamptonyachtgroup"> <img src="http://hamptonyachts.com/uploads/Instagram1.png" width="43" height="46" alt="" style="display:inline-block;" /></a>
    <a href="http://hamptonyachtgroup.com"><img src="http://hamptonyachts.com/uploads/Web.png" width="70" height="46" alt="" style="display:inline-block;" /></a></td>
</tr>
</table>

</body>

</html>

祝游艇销售顺利。

HTML 邮件签名设计 - 手机问题

HTML Email Signature Design - Mobile Trouble

html

html-email