HTML Gmail 签名在 iOS 邮件中的显示方式不同

Question

我已将以下电子邮件签名放在一起并将其粘贴到 gmail。我已经对其进行了彻底的测试，但最近注意到一个问题，即 iOS 邮件应用程序将电子邮件的正文强制为屏幕宽度的 50%（请参阅随附的屏幕截图）。

我尝试插入媒体查询，我现在知道这些查询已从 Gmail 中删除。我还尝试删除表格并使用 p 标签和内联样式创建签名。这更弄乱了宽度。

所以我就是不明白为什么 iOS 邮件会改变签名上方正文的宽度？

<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
<tbody><tr>
<td style="line-height: 100%;">
<table cellpadding="0" cellspacing="0" border="0" align="left" height="274" 
style=" border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width: 480px;">
  <tbody>
  <tr>
  <td  colspan="2">
    <a href="http://www.hostel.com/" target="_blank">
        <img src="http://i57.tinypic.com/2vmar0i.png" style="padding: 12px 20px 0 0;">
    </a>
  </td>
  </tr>
  <tr>
    <td colspan="2" valign="center" height="5">
        <p style="font-family: Arial; font-weight: bold; 
        font-size: 19px; line-height: 1.3; text-align: left; padding: 10px 0; margin: 20px 0 10px 20px;">
        Senders Name<br>
        <span style="font-size: 16px;">Job Title</span>
        </p>
    </td>
  </tr>
  <tr style="height: 50px;">
    <td valign="top" style="line-height: 100%; width: 47%;">
        <p style="line-height:1.7; margin-top: 0px; font-size: 11px; padding-right: 10px; margin-left: 20px;">
        <a href="https://goo.gl/maps/twgHt" target="_blank" style="text-decoration: none !important; color: #000 !important;">
        <strong>Address</strong><br>
        Street Name<br>
        London</p></a>
    </td>
    <td width="230" valign="top" style="line-height:1.7">
        <p style="line-height:1.7; margin-top: 0px; font-size: 11px;">
        <strong>T</strong>:
        <a href="tel:+44123456789" style="text-decoration: none !important; color: #000 !important;">+44 (0)207 729 1833</a><br>
        <strong>M</strong>: 
        <a href="tel:+44123456789" style="color: #000; text-decoration: none;">+44 (0)771 216 9796</a><br>
        <strong>W</strong>: 
        <a href="http://www.hostel.com/" target="_blank" style="color: #000; text-decoration: none;">
        www.hostel.com </a></p>
    </td>
  </tr>
    <tr>
        <td colspan="2">
        <p style="
        padding: 7px 15px;
        font-size: 12px;
        font-weight:bold;
        letter-spacing: 0.8px;
        display: inline-block;
        background: #FFD558;
        margin: 20px 0 0 20px;">
        <a href="https://twitter.com" target="_blank" style="
        color: #000 !important; text-decoration: none;">
        Twitter</a> &nbsp;|&nbsp; 
        <a href="https://www.facebook.com" target="_blank" style="
        color: #000 !important; text-decoration: none;">
        Facebook</a> &nbsp;|&nbsp; 
        <a href="https://plus.google.com" target="_blank" style="
        color: #000 !important; text-decoration: none;">
        Google+</a> &nbsp;|&nbsp;
        <a href="http://instagram.com" target="_blank" style="
        color: #000 !important; text-decoration: none;">
        Instagram</a> &nbsp;|&nbsp;
        <a href="http://www.pinterest.com" target="_blank" style="
        color: #000 !important; text-decoration: none;">
        Pinterest</a>
        </p>    
        </td>
    </tr>
    <tr>
    <td colspan="4">
        <p style="
        font-size: 10px; 
        color: #ADADAD; 
        padding-top: 15px; 
        border-top: 2px solid #CCC;
        line-height: 1.5;
        margin: 0 20px;
        width: 83%;">
        This email and any files transmitted with it are confidential and intended 
        solely for the use of the individual or entity to whom they are addressed. 
        No Curfew Ltd trading as 'Name' is a registered company 
        with registration number <a href="#" style="color: #ADADAD; text-decoration: none;"> 123456789</a>.
        </p>
    </td>
    </tr>
</tbody></table>
</td>

Answer 1

iPhone 将电子邮件调整为最大元素。 (Email on Acid)

调整大小的原因是您的签名，作为最大的元素，并且可能是由您的地址和联系信息的 2 列引起的。尽管通过媒体查询调整了大小，这两列的表格单元格被推得更宽以容纳文本。这会导致表格变得比定义的更宽，并破坏您设置的 CSS 布局。

要解决此问题，我会将其更改为具有 2 个表格（左右对齐）而不是 2 个列的响应式设计。这应该可以解决您的问题。

通过拥有 2 个表格，您可以在移动时将联系信息滑到地址下方（反之亦然），这样两者仍然可以是全宽且不会拉伸表格。 (Campaign Monitor 2-1 column Responsive Design walkthrough)