縮放html電子郵件以適應移動屏幕而不滾動（android/iOS）

我試圖構建一個html電子郵件，該電子郵件將縮放以適應移動屏幕，而用戶無需水平滾動。我試過使用...縮放html電子郵件以適應移動屏幕而不滾動（android/iOS）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

並將身體寬度設置爲100％ - 但似乎都沒有工作。還有其他建議嗎？

這裏是我的全功能HTML

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <style type="text/css">.ExternalClass .ecxReadMsgBody{width:100%;} .ExternalClass{width:100%;} body{margin: 0; padding: 0;} </style> 

</head> 
<body style="background: #dfdfe0; width:100%;"> 

    <table align="center" border="0" cellpadding="0" cellspacing="0" style="background: #dfdfe0;color: #37383a;margin: 0px;width: 100%;" width="100%"> 
     <tr> 
      <td> 
       <table border="0" cellpadding="0" cellspacing="0" width="576"> 

        <tr> 
         <td colspan="2"></td> 
         <td colspan="34" style="background-color: red;" bgcolor="red"><img width="522" src="header2.png"></td> 
         <td colspan="2"></td> 
        </tr> 

        <tr> <!-- Start of the email grid --> 
         <td width="9"></td> 
         <td width="18" height="10" style="background-color: red; height: 10px;" bgcolor="red"></td> 
         <td width="27"></td> 
         <td width="9"></td> 
         <td width="9"></td> 
         <td width="27"></td> 
         <td width="9"></td> 
         <td width="9"></td> 
         <td width="27"></td> 
         <td width="9"></td> 
         <td width="9"></td> 
         <td width="27"></td> 
         <td width="9"></td> 
         <td width="9"></td> 
         <td width="27"></td> 
         <td width="9"></td> 
         <td width="9"></td> 
         <td width="27"></td> 
         <td width="9"></td> 
         <td width="9"></td> 
         <td width="27"></td> 
         <td width="9"></td> 
         <td width="9"></td> 
         <td width="27"></td> 
         <td width="9"></td> 
         <td width="9"></td> 
         <td width="27"></td> 
         <td width="9"></td> 
         <td width="9"></td> 
         <td width="27"></td> 
         <td width="9"></td> 
         <td width="9"></td> 
         <td width="27"></td> 
         <td width="9"></td> 
         <td width="9"></td> 
         <td width="27"></td> 
         <td width="18" style="background-color: red;" bgcolor="red"></td> 
         <td width="9"></td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

非常感謝！

編輯

請注意，我也減少列的數量爲5，我仍然得到同樣的結果

來源

2013-02-14 Jose the hose

您的表格寬度設置爲大於手機屏幕尺寸的像素（576px）。您可以使用media query (responsive design)來禁用或調整桌面版本的大小以適應移動屏幕，否則您需要使用fluid design。

侷限性是媒體查詢在Gmail中無法正常工作，因爲您無法內聯它們。 Fluid僅適用於單列布局。

來源

2013-02-19 15:55:11 John

<table border="0" cellpadding="0" cellspacing="0" width="100%">

您已指定在表的絕對寬度。將其更改爲100％寬度。

來源

2013-02-14 09:51:52

感謝您的回答。我需要設置內表寬度，以便我可以爲我的網格設置寬度。我確實改變它來測試，它仍然沒有工作 – 2013-02-14 09:55:51

你可以試試這個： – 2013-02-14 10:04:15

也有太多的個人在您的表中的列。所以瀏覽器不能容納這麼多的列而沒有水平地引入滾動條。減少列數或列寬。 – 2013-02-14 10:06:25

縮放html電子郵件以適應移動屏幕而不滾動（android/iOS）

回答

相關問題