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

我已经把下面的电子邮件签名放在一起并粘贴到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>

发件人名称

职位名称



T：


M：


W：


|  
|  
| 
| 


本电子邮件及其传输的任何文件均为机密文件
仅供收件人个人或实体使用。
以“名称”进行交易的无宵禁有限公司是一家注册公司
有注册号。

---

iPhone将电子邮件的大小调整为最大元素。（）

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

为了解决这个问题，我将它改为一个响应性设计，有两个表（左对齐和右对齐），而不是两列。这可能会解决你的问题

通过将其设置为两个表格，您可以在移动时将联系人信息滑到地址下方（反之亦然），这样两者都可以保持全宽，而不会拉伸表格。（）