響應HTML電子郵件安卓nexus 5（4.4.2）本機郵件應用程序

我有一個測試佈局，使用表格顯示兩列和媒體查詢，它們將兩列堆疊到支持媒體查詢的電子郵件客戶端上。我堅持使用表格而不是divs，因爲我們需要支持Outlook：。在Android 4.3及更低版本（列堆疊）中佈局效果很好，但在Nexus 5（Android 4.4.2）上爆炸。仍然顯示在一起，第二列被完全壓扁，似乎4.4.2不支持在td顯示塊，有沒有其他人經歷過這種情況？如果是，是否有任何解決方法？順便說一句，它似乎只有顯示塊和顯示：內聯塊在Nexus 5上不受支持，如果我在媒體查詢中將tds設置爲display：none，它們隱藏在屏幕上。下面是一個基本的html電子郵件模板，將不起作用：響應HTML電子郵件安卓nexus 5（4.4.2）本機郵件應用程序

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta name="viewport" content="initial-scale=1.0;width:device-width"> 
    <!-- So that mobile webkit will display zoomed in --> 
    <title>Email template</title> 
    <!-- disable auto telephone linking in iOS --> 
    <meta name="format-detection" content="telephone=no"> 
    <style type="text/css"> 
     @media screen and (max-width:640px) { 
      table[class="container"] { 
       width: 100%!important; 
      } 

      td[class="cell"] { 
       background-color: #cc3333; 
       width: 100%!important; 
       display: block!important; 
      } 
     } 
    </style> 
</head> 
<body> 
    <table width="640" align="center" cellpadding="0" cellspacing="0" class="container"> 
     <tr> 
      <td class="cell">Hello world</td> 
      <td class="cell">Hello world</td> 
     </tr> 
    </table> 
</body> 
</html>

編輯1/14因此，使用表作爲塊元素的作品硅。如果寬度小於640像素，表格會浮動（使用對齊）。現在唯一的問題是，當這兩個表換行時，因爲它們的寬度設置爲320px，所以在具有超過320像素但小於640像素的原始分辨率的設備上，文本不會重排爲100％（例如，橫向模式下的iPhone爲480像素），而是包裝在320px（在右邊留下大約160px的空白）。我知道我可以使用媒體查詢更改寬度，但不幸的是它不適用於Gmail應用程序（grrh）。任何想法/建議？簡單的表結構 -

<table align="center" style="width: 640px;max-width:100%" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td> 
      <table align="left" style="width:49%;" border="1"> 
       <tr> 
        <td style="max-width: 100%">long text which should take about 480px 
        </td> 
       </tr> 
      </table> 
      <table style="width:49%;max-width: 100%" align="left"> 
       <tr> 
        <td style="width:100%;">long text which should take about 480px 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table>

來源

2014-01-13 Sachin

我沒有找到與它打交道，使用表並對其施加塊的一種方式如下建議http://stackoverflow.com/questions/17674172/equivalent-to-float-在-前景。這似乎工作，但仍然打開任何其他建議。 – Sachin

上面的鏈接是一種浮動技術，不需要媒體查詢功能。理想情況下，如果您有兩個相同大小的列，儘管您可以隨時在媒體查詢中對其進行調整。但獨立，恕我直言，它是一個非常優秀的技術媒體查詢，因爲它適用於Gmail和其他客戶端沒有MC支持。（我可能會偏向寫這篇文章的人） – John

@John - 我同意，鑑於大多數使用gmail的人會使用gmail應用程序而不是原生電子郵件應用程序！ – Sachin

我認爲，這將是最好只使用表CSS樣式，因爲td標籤是更加難以預測

你可以找到2列的一個很好的例子在這裏佈局：
http://www.campaignmonitor.com/guides/mobile/responsive/

來源

2014-01-13 09:36:03

這就是我現在正在做的事情 - 更改爲表格而不是使用tds作爲塊元素。唯一的缺點是有兩個表是水平的，我無法想出一個策略，其中第2列的內容是垂直對齊的第一列 – Sachin

我知道這是前一陣子，但我有同樣的最近起訴。我有兩張桌子，一張左對齊，另一張右對齊。在媒體查詢中，爲了讓表格水平對齊，我將float設置爲none，並將margin設置爲表格居中： 'table {float：none！important; margin：0 auto！important; }' – josh1978

我可能是黨的有點晚，但對於那些仍然遇到這個問題，需要的固溶體，同時保持自己的代碼乾淨，這裏是一個：

使用您的最佳做法，只需使用<td>的多列布局，請使用<th>'s。並在其上放置一個align="left"和font-weight: normal;以覆蓋它的標準樣式。

<th>仍然表現在4.4的響應，而<td>的不。

我希望這會有所幫助。

P.S. 如果你還想移動的Gmail應用程序，你可能也想嘗試移動應用程序的第一個變種：http://julie.io/writing/responsive-layout-email-ux-munich-newsletter/

來源

2015-10-13 07:44:24 webster69

請嘗試gmail android應用程序hack並使用th代替td。我使用此佈局代碼來發送電子郵件模板。此代碼顯示除iPhone之外的所有電子郵件客戶端上的兩列。此代碼顯示iphone上的兩個塊內容。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 
"http://www.w3.org/TR/html4/loose.dtd"> 
 
<html lang="en"> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <meta name="viewport" content="initial-scale=1.0;width:device-width"> 
 
    <!-- So that mobile webkit will display zoomed in --> 
 
    <title>Email template</title> 
 
    <!-- disable auto telephone linking in iOS --> 
 
    <meta name="format-detection" content="telephone=no"> 
 
    <style type="text/css"> 
 
     .gmailfix {display:none;display:none!important;} 
 

 
     @media only screen and (max-width: 640px) { 
 
      *[class].ablock { 
 
       display:block !important; 
 
       text-align:center; 
 
       background-color: #cc3333; 
 
       width: 100%!important; 
 
       display: block!important; 
 
      } 
 
     } 
 

 
     @media screen and (max-width:480px) { 
 
      .tblock{ 
 
       display: block !important; 
 
       text-align: center !important; 
 
       max-width:600% !important; 
 
       width:100% !important; 
 
      } 
 
     } 
 

 
    </style> 
 
</head> 
 
<body> 
 
<div class="gmailfix" style="white-space:nowrap;line-height:0;"> 
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
 
</div> 
 
    <table align="center" style="width: 640px;max-width:100%" cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
     <td> 
 
      <table class="tblock" style="width:100%;"> 
 
       <tr> 
 
        <th class="ablock">long text which should take about 480px 
 
        </th>     
 
        <th class="ablock">long text which should take about 480px 
 
        </th> 
 
       </tr> 
 
      </table> 
 
     </td> 
 
    </tr> 
 
</table> 
 
</body> 
 
</html>

來源

2017-02-01 20:30:04 Victoria

響應HTML電子郵件安卓nexus 5（4.4.2）本機郵件應用程序

回答

相關問題