HTML 电子邮件签名设计 - 移动问题答案

【问题标题】：HTML Email Signature Design - Mobile TroubleHTML 电子邮件签名设计 - 移动问题
【发布时间】：2018-04-06 22:05:24
【问题描述】：

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

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

主要问题是，当电子邮件在移动设备上打开时，它的每一列（通过标签分隔）位于不同的行上。当我将手机翻转到水平位置时，它会自动重新调整...这是否意味着 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>

【问题讨论】：

好消息是，它不仅在移动设备上看起来很糟糕，而且在许多其他电子邮件客户端中也是如此，但它的工作方式与您设计的完全一样。您正在引用不存在的类，并且您没有内联 css 来弥补宽度和其他值的不足。为什么不也发布您的 CSS？
您基本上可以放弃让 HTML 电子邮件看起来不错了。请勿将其用于某些基础知识之外的任何事情。

标签： html html-email

【解决方案1】：

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

您的社交媒体图形没有在 226 像素宽的表格单元格中排列，这是您的签名中没有排列的原因之一。我没有花时间为你编辑它们，我只是让它们在宽度上适合，所以它们看起来很不稳定。

我在 Litmus 中对此进行了测试，它适用于 Apple、IOS、Android、Gmail、Outlook 等。我将表格的背景变为红色，以显示您仍需要修复的内容。您也应该填写您的 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>

祝游艇销售好运。

【讨论】：