如何在iOS郵件應用程序中使表格單元格響應

Question

我目前正在開發一個電子郵件，該郵件在各個位置具有2列布局。我最初爲每列使用<div>標籤，除了老版本的Outlook以外，每個電子郵件客戶端都能很好地工作（不管屏幕大小，列的寬度都是100％）。

要解決Outlook問題，我只是將<div>標籤更改爲<td>的。現在，我在iOS郵件應用程序（10.1.1）中遇到了問題，其中<td>拒絕在較小的屏幕上全角顯示。在下面的代碼中，您可以看到<td class="col-6-article">元素的固定寬度爲300px，但是當我在iOS郵件應用程序中打開電子郵件時，那麼這兩個元素的屏幕寬度恰好爲50％。這裏有一個屏幕截圖：http://imgur.com/a/0XsGz

有沒有其他人遇到這個問題與iOS郵件應用程序？我不明白爲什麼我的內聯樣式和媒體查詢被忽略，僅僅是因爲元素現在是表格單元而不是div。

HTML（對不起，我盡力把它清理乾淨）：

<table cellspacing="0" cellpadding="0" width="100%" align="center"> 
    <tbody> 
    <tr style="vertical-align: top;"> 
     <td width="100%"> 
     <table class="container" style="max-width: 650px; margin: 0 auto;background:#fff;" cellspacing="0" cellpadding="0" width="100%" align="center"> 
      <tr> 
      <td class="col-6-article" style="display:inline-block; width:300px !important; padding: 0 0 25px 15px;"> 
       <img class="center fullwidth" style="display: block; width: 100%!important; max-width: 325px;" src="http://billykroger.com/img/1mLusPPr.jpg" width="325" /> 
       <h3>Pledges to Ipsum fall short</h3> 
       <p>Abby Bruell | Jun 2015</p> 
       <p>Despite good intentions, donors to the London conference have failed to follow through will the pledges they made to aid Syrian refugees. Now, millions of women and children face the consequences of their inaction.</p> 
       <table> 
       <tr> 
        <td style="text-align: center; height: 33px; width: 160px; background: #007c76;"> 
        <table style="margin: 0 auto;"> 
         <tr height="5" style="height:5px"></tr> 
         <tr style="line-height:normal"> 
         <td><a style="padding: 0; color: #ffffff" href="#"> 
          <span style="color: #FFFFFF; font-size: 14px">READ MORE</span> 
          </a> 
         </td> 
         <td> 
          <a style="padding: 0; color: #ffffff;" href="#"> 
          <img width="20" height="20" style="height: 20px !important; width: 20px !important;" src="http://cww.convio.net/images/content/pagebuilder/arrow.png" /> 
          </a> 
         </td> 
         </tr> 
         <tr height="5" style="height:5px"></tr> 
        </table> 
        </td> 
       </tr> 
       </table> 
      </td> 
      <td class="col-6-article" style="display:inline-block; width:300px !important; padding: 0 0 25px 15px;"> 
       <img class="center fullwidth" style="display: block; width: 100%!important; max-width: 325px;" src="http://billykroger.com/img/1mLusPPr.jpg" width="325" /> 
       <h3>Pledges to Ipsum fall short</h3> 
       <p>Abby Bruell | Jun 2015</p> 
       <p>Despite good intentions, donors to the London conference have failed to follow through will the pledges they made to aid Syrian refugees. Now, millions of women and children face the consequences of their inaction.</p> 
       <table> 
       <tr> 
        <td style="text-align: center; height: 33px; width: 160px; background: #007c76;"> 
        <table style="margin: 0 auto;"> 
         <tr height="5" style="height:5px"></tr> 
         <tr style="line-height:normal"> 
         <td><a style="padding: 0; color: #ffffff" href="#"> 
          <span style="color: #FFFFFF; font-size: 14px">READ MORE</span> 
          </a> 
         </td> 
         <td> 
          <a style="padding: 0; color: #ffffff;" href="#"> 
          <img width="20" height="20" style="height: 20px !important; width: 20px !important;" src="http://cww.convio.net/images/content/pagebuilder/arrow.png" /> 
          </a> 
         </td> 
         </tr> 
         <tr height="5" style="height:5px"></tr> 
        </table> 
        </td> 
       </tr> 
       </table> 
      </td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
</table> 

CSS媒體查詢：

@media screen and (max-width: 650px) and (max-device-width: 650px) { 
    .col-6-article { 
     width: 100% !important; 
     display: block !important; 
    } 
} 

Answer 1

你決鬥!important標籤;您不需要在內聯css中包含!important。更改此：

<td class="col-6-article" style="display:inline-block; width:300px !important; padding: 0 0 25px 15px;"> 

要這樣：一旦!important從身體的內聯CSS刪除

<td class="col-6-article" style="display:inline-block; width:300px padding: 0 0 25px 15px;"> 

，媒體查詢代碼可以覆蓋300像素寬度，將其更改爲100％或任何你想。