兩列響應電子郵件媒體查詢 - iPhone不顯示錶全寬

我想創建一個響應式的兩列行（在表中）使用電子郵件的媒體查詢。使用table align method from Mailchimp，它在桌面和Android上看起來很棒。在iPhone上，媒體查詢告訴「templatecolumnContainer」在480px下顯示100％的屏幕寬度，但它只填充50％。另一個列容器確實包裹在圖像下面並拉伸了視口的寬度。兩列響應電子郵件媒體查詢 - iPhone不顯示錶全寬

這裏的媒體查詢 -

@media only screen and (max-width: 480px) { 
.templateColumnContainer2 { 
     display: block !important; 
     width:100% !important; 
     margin-left: auto !important; 
     margin-right: auto !important; 
    } 
}

而這裏的兩列 -

<table align="center" border="0" cellpadding="0" cellspacing="0" id="templateColumns" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: inline-block !important;padding-bottom: 15px;" width="750"> 
    <tbody> 
     <tr> 
      <td align="center" valign="top"> 
       <table align="left" border="0" cellpadding="0" cellspacing="0" class="templateColumnContainer2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: block !important;padding-bottom: 15px; padding-left: 15px;" width="360"> 
        <tbody> 
         <tr> 
          <td class="leftColumnContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 21px; text-align: center;"> 
           <img class="columnImage" src="image.jpg"> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
       <table align="right" border="0" cellpadding="0" cellspacing="0" class="templateColumnContainer2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: block !important;padding-bottom: 15px; padding-left: 15px;" width="360"> 
        <tbody> 
         <tr> 
          <td class="rightColumnContent" height="200" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 18px; text-align: left; padding-left: 15px;" valign="top"> 
           <h3 style="color: #606060 !important; display: inline; font-family: Helvetica; font-size: 16px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 16px; margin: 0;text-align: left;">Header</h3> 
           <p>Some paragraph text</p> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
</table>

，我會永遠感激，如果任何人都可以在任何填補缺口的編碼，我忽略！提前致謝。

來源

2016-07-06 rokenbk97

這應該做什麼你問：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
<title>Untitled Document</title> 
 

 
<style> 
 
\t @media screen and (max-width: 750px) { 
 
\t \t #templateColumns { 
 
\t \t \t width: 100% !important; 
 
\t \t } 
 
\t \t .templateColumnContainer2 { 
 
\t \t \t display: block !important; 
 
\t \t \t width: 100% !important; 
 
\t \t \t max-width: 100% !important; 
 
\t \t } 
 
\t } 
 
</style> 
 
</head> 
 

 
<body width="100%" style="Margin: 0;"> 
 
    <center style="width: 100%;"> 
 
\t \t <table cellspacing="0" cellpadding="0" border="0" align="center" width="750" style="margin: auto;" id="templateColumns"> 
 
\t \t \t <tr> 
 
\t \t \t \t <td class="templateColumnContainer2" width="50%" valign="top"> 
 
\t \t \t \t \t <table cellspacing="0" cellpadding="0" border="0" width="100%"> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td class="leftColumnContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 21px; text-align: center;"> 
 
\t \t \t \t \t \t \t \t <img class="columnImage" src="image.jpg" width="100%" height="auto"> 
 
\t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t </table> 
 
\t \t \t \t </td> 
 
\t \t \t \t <td class="templateColumnContainer2" width="50%" valign="top"> 
 
\t \t \t \t \t <table cellspacing="0" cellpadding="0" border="0" width="100%"> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td class="rightColumnContent" height="200" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 18px; text-align: left; padding-left: 15px;"> 
 
\t \t \t \t \t \t \t \t <h3 style="color: #606060 !important; font-family: Helvetica; font-size: 16px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 16px; margin: 0;text-align: left;">Header</h3> 
 
\t \t \t \t \t \t \t \t <p>Some paragraph text</p> 
 
\t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t </table> 
 
\t \t \t \t </td> 
 
\t \t \t </tr> 
 
\t \t </table> 
 
\t </center> 
 
</body> 
 
</html>

我不知道你有以上這什麼父母HTML，但我包括<body>和<center>，並稍微改寫了<table>標記+類來實現響應式佈局，一旦視口下降到012px的桌面寬度750px以下，該佈局就會堆疊。

來源

2016-07-07 14:36:01

上述解決方案只適用於iPhone。 Android和Gmail應用將繼續並排顯示內容。 –

我知道，我相信這就是問題的要求。 –

對不起，對於已故的+1特德，但這工作像一個魅力！不能感謝你，希望這篇文章能夠幫助其他人強調電子郵件開發工作。 – rokenbk97

你在那裏應該工作。我懷疑你桌子上的其他造型是干涉它的。嘗試刪除部分或全部內嵌樣式，看看是否修復它，然後逐漸將其添加回來。對不起，我現在沒有時間自己測試一下。

來源

2016-07-07 20:36:38

兩列響應電子郵件媒體查詢 - iPhone不顯示錶全寬

回答

相關問題