iOSメールアプリケーションでテーブルセルを反応させる方法

Question

現在、さまざまな場所に2列レイアウトの電子メールを作成しています。当初、各カラムに<div>のタグを使用しました。これは、古いバージョンのOutlookを除くすべての電子メールクライアントで効果的でした（カラムは画面サイズに関係なく100％の幅でレンダリングされます）。

Outlookの問題を解決するには、<div>タグを<td>に変更するだけです。今、私は、<td>の小さな画面で全幅に行くことを拒否するiOSメールアプリケーション（10.1.1）に問題があります。下のコードでは、<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;"> 

：

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

!importantが身体のインラインCSSから削除されると、メディアクエリのコードは300ピクセルの幅をオーバーライドして、100％または何でもあなたにそれを変更することができます欲しいです。