iOS Mail 응용 프로그램에서 표 셀을 반응 적으로 만드는 방법

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 대신 테이블 셀이 되었기 때문에 내 인라인 스타일과 미디어 쿼리가 무시되는지 이해할 수 없습니다.

<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 미디어 쿼리 :

HTML은 (죄송합니다, 그것을 청소하기 위해 최선을 시도) 당신은 !important 태그 결투 한

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

Answer 1

을; 인라인 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 % 또는 당신이 무엇을으로 변경할 수 있습니다 필요.