iOS 中的电子邮件签名文本换行和调整大小答案

【问题标题】：Email Signature Text Wrapping and Resizing in iOSiOS 中的电子邮件签名文本换行和调整大小
【发布时间】：2014-11-22 16:33:55
【问题描述】：

我的电子邮件签名包装在 iOS 上的 Apple Mail 中遇到了一些问题，请参见此处：

我希望签名在桌面电子邮件客户端（例如 OS X 上的 Apple 邮件）上显示（不换行并且大小适合屏幕宽度）：

这是我目前正在使用的代码。如果有人可以提供有关我哪里出错的指导，我将不胜感激。

<body topmargin="0" leftmargin="0" rightmargin="0">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tbody>
      <tr>
        <td>
          <table align="left" border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td align="left">
                  <a href="http://bit.ly/1roJoAu">
                    <img alt="Motion Source" border="0" src="http://i.imgur.com/YG8iERP.jpg" title="My Website">
                  </a>
                </td>
                <td width="100%">
                  <span style="text-align: left; color: #797C79; font-family: 'Arial', sans-serif; font-size: 10pt; font-weight: bold">
                                        First Last</span><span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #797C79; font-family: 'Arial', sans-serif; font-size: 9pt; font-weight: normal">&nbsp;|&nbsp; Media Producer</span>
                  <br>
                  <span style="text-align: left; color: #797C79; font-family: Arial; font-size: 9pt; font-style: normal; font-weight: normal;">

                                        mobile&nbsp;(555)
                                        555-5555&nbsp;|&nbsp;fax&nbsp;(555) 555-5555<br></span>

                  <table border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td>
                          <span style="line-height: 3px; font-size: 3px;">
                                                            &nbsp;<br>
                                                        </span>
                          <span style="text-align: left; margin-top: 0px; color: #D0913D; font-size: 8pt; font-weight: bold; font-family: 'Calibri', sans-serif;">
                                                            <a href="http://website.com" style="text-decoration: none; color: #b6a15e;">website</a>&nbsp;|&nbsp;<a href="http://linkd.in/" style="text-decoration: none; color: #b6a15e;">LinkedIn</a>&nbsp;|&nbsp;<a href="mailto:none@me.com" style="text-decoration: none; color: #b6a15e;">email</a>
                                                        </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>

【问题讨论】：

你用什么测试？您是否只在 Apple Mail 中进行测试？

标签： html ios css email html-email

【解决方案1】：

只需在<table> 中使用min-width: 500px。

并且在所有情况下都避免在宽度上使用%，使用px 或pt

【讨论】：

【解决方案2】：

为防止 iOS 放大较小尺寸的文本，请在正文中使用这段代码（以完全阻止它）或仅在您特别不希望调整文本大小的元素中使用。

-webkit-text-size-adjust: none

根据您的文本长度，您可能需要修复它的唯一内容。您需要使用媒体查询来缩小较窄屏幕上的文本。

【讨论】：

【解决方案3】：

您将不得不使用媒体查询来显着缩小您的文本大小。老实说，您那里的长文本行可能太小而无法在手机上显示。你应该在某处打破你的界限。它还有助于缩小图像以腾出更多空间。

选择断点的一个技巧是不要在签名中添加断点 (&nbsp;)，并让它在更合适的位置溢出。

例子：

<!-- This will look the same, but break where the spaces are, not where the &nbsp are -->
Your&nbsp;Name | Your&nbsp;Title

【讨论】：

【解决方案4】：

对于您的字体大小，请尝试从点 (pt) 切换到 em 或 px。

<span style="text-align: left; margin-top: 0px; color: #D0913D; font-size: 0.7em; font-weight: bold; font-family: 'Calibri', sans-serif;">
<a href="http://website.com" style="text-decoration: none; color: #b6a15e;">website</a>&nbsp;|&nbsp;<a href="http://linkd.in/" style="text-decoration: none; color: #b6a15e;">LinkedIn</a>&nbsp;|&nbsp;<a href="mailto:none@me.com" style="text-decoration: none; color: #b6a15e;">email</a>
</span>

您应该只真正使用 pt 进行打印。 Here's a helpful chart。切换可能无法完全解决您的问题，但如果您使用 em，您的文本会更有响应性。

【讨论】：

电子邮件中的文本最好使用pt 或px，以便更好地兼容更广泛的设备和电子邮件客户端。
我不明白你的意思。设备和屏幕之间的点差异很大。此外，您也不是不能使用 em。 em 与支持 CSS 1 + 的任何设备或客户端兼容，大约在 1996 年。w3.org/TR/1999/REC-CSS1-19990111 .... 基本上，如果客户端支持 HTML，它将支持 CSS。此外，大多数客户都为 em 优化了基线。（Outlook - 1em/16px / Apple Mail - 1em/12px / iOS - 13px）。
在 3 种选择中，我肯定会选择 px。 pt 和 em 在电子邮件中都不一致。优化不佳的“像素完美”布局会在呈现文本大于您预期的客户端中中断。使用px，无论您在什么地方或在哪里查看它，它总是一样的——只要您阻止了较小文本的自动放大。 Campaign Monitor on this topic