Question

我在iOS上看到的Apple Mail中的电子邮件签名包装存在一些问题：

enter image description here

我希望签名出现（非包装并且大小适合屏幕宽度），就像在桌面电子邮件客户端上一样，例如OS X上的Apple邮件：

enter image description here

这是我目前使用的代码。如果有人能就我出错的地方提供指导，我将不胜感激。

<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>

Answer 1

您必须使用媒体查询来显着缩小文本大小。说实话，你在那里的长文本行可能太小，无法在手机上显示。你应该在某个地方打破你的台词。它还有助于缩小图像以腾出更多空间。

选择断点的提示是在签名中不添加任何中断空格（ ），并让它在更合适的位置溢出。

示例：

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

Answer 2

要防止iOS放大较小尺寸的文本，请在正文中使用此代码（以完全停止）或仅在您不希望调整文本大小的元素中使用。

-webkit-text-size-adjust: none

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

Answer 3

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

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

Answer 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。切换可能无法完全解决您的问题，但如果您使用ems，您的文本将会更快地响应。

电子邮件签名文本在iOS中包装和调整大小

4 个答案: