某些图像在移动 Outlook 中的大小不正确

Question

我正在为我们公司设计签名。我已经在所有经过测试的电子邮件客户端（iOS/macOS 邮件、Outlook desktop/on 网络）除了移动 Outlook（iOS 和 Android).问题是有些图像太小，即使明确设置了宽度/高度。

所有图像的大小都是样式中设置的最终大小的两倍（以适应高 DPI 屏幕）。根据我的研究，如果这是一个 DPI 问题，它不会只出现在移动 Outlook 客户端中，但我可能是错的。

预期结果（出现在所有其他经过测试的电子邮件客户端中）：

Outlook 移动版中的结果（iOS 和 Android）——特别是红色图像下的社交图标：

下面的 HTML 仅用于左侧的品牌部分，并被剥离为“要点”。希望仍然可以让我了解我正在尝试做什么，但如果我需要包含更多内容，请告诉我。

<table style="width: 144px; float: left;">
  <tbody>
    <!--? logo -->
    <tr>
      <td>
        <a href="...">
          <img src="..." width="144" height="60" style="height:60px; width:144px;">
        </a>
      </td>
    </tr>
    <!--? vertical spacer -->
    <tr><td style="height: 1px;"></td></tr>
    <tr>
      <td>
        <table style="width: 144px;">
          <tbody>
            <!--? all the cells in this row add up to the same width above, 144px -->
            <!--? (5 * 28) + (4 * 1) = 144 -->
            <tr>
              <!--? facebook -->
              <td>
                <a href="...">
                  <img src="..." width="28" height="28" style="height:28px; width:28px">
                </a>
              </td>
              <!--? horizontal spacer -->
              <td style="width:1px;" width="1"></td>
              <!--? same code as above, skipped for brevity -->
              <!--? twitter-->
              <!--? horizontal spacer -->
              <!--? linkedin -->
              <!--? horizontal spacer -->
              <!--? youtube -->
              <!--? horizontal spacer -->
              <!--? instagram -->
              <!--? horizontal spacer -->
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

关于如何使 Outlook Mobile 看起来像所有其他电子邮件客户端有什么想法吗？

Answer 1

我没有任何可以指出的权威文档或错误跟踪器，但我相信 Outlook 移动版将 float: 属性视为 inline-block 样式——即它试图 auto-shrink 满足，也许太热心了。

在 table 容器元素上明确设置高度对我来说解决了这个问题：

<table style="width: 144px; height: 89px; float: left;">
  <!--? logo -->
  <!--? vertical spacer -->
  <table style="width: 144px; height: 28px;">
    <!--? social -->
  </table>
</table>

某些图像在移动 Outlook 中的大小不正确

Some images not correctly sized in mobile Outlook

html

css

email

mobile

outlook