Question

我已将以下电子邮件签名放在一起并粘贴到gmail中。我已经对它进行了彻底的测试，但最近发现了一个问题，即iOS Mail应用程序会强制将电子邮件的正文文本扩展到屏幕宽度的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）

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

1 个答案: