缩放 html 电子邮件以适应移动屏幕而无需滚动（Android / iOS）答案

【问题标题】：Scale html email to fit within in mobile screen without scroll (android / iOS)缩放 html 电子邮件以适应移动屏幕而无需滚动（Android / iOS）
【发布时间】：2013-01-30 02:01:27
【问题描述】：

我正在尝试构建一个 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，但我仍然得到相同的结果

【问题讨论】：

标签： android iphone html-email

【解决方案1】：

您的表格宽度设置为大于手机屏幕尺寸的像素 (576 像素)。您可以使用media query (responsive design) 禁用桌面版本或调整其大小以适应移动屏幕，否则您需要使用fluid design。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

感谢您的回答。我需要设置内部表格宽度，以便我可以设置网格的宽度。我确实改了测试，还是不行
你可以试试这个：
您的表中的单独列也太多了。所以浏览器不能在不水平引入滚动条的情况下容纳这么多列。减少列数或列宽。
再次感谢。中等 dpi 密度不起作用。至于列数，您不正确。如果您删除图像的第一行，它可以正常工作。我注意到的唯一有列限制的电子邮件客户端是 Outlook 2007（最多 62 列）
由于您已将缩放比例指定为 1 并且它的列太多，因此可能会导致问题。你能减少列以适应屏幕的宽度吗