3

我正在尝试构建一个 html 电子邮件，它可以缩放以适应移动屏幕，而无需用户水平滚动。我试过用...

<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，但我仍然得到相同的结果

4

2 回答 2

2

您的表格宽度以像素 (576px) 为单位设置，大于手机屏幕尺寸。您可以使用媒体查询（响应式设计）来禁用或调整桌面版本以适应移动屏幕，否则您需要使用流畅的设计。

限制是媒体查询在 Gmail 中不起作用，因为您无法内联它们。流体仅适用于单列布局。

于 2013-02-19T15:55:11.163 回答
0 
<table border="0" cellpadding="0" cellspacing="0" width="100%">

您已在表格中指定了绝对宽度。将其更改为 100% 宽度。

于 2013-02-14T09:51:52.287 回答