Question

我正在为客户设置一个html模板，以便玩得很开心。

响应性在桌面浏览器中正确预览，但是当发送到iphone时，td不会按应用百分比进行缩放，只是默认为内容大小。我提供的示例是图像（尝试为模板设置导航），但也仅适用于文本。

目标是以600px为中心的内容区域，电子邮件的背景为浅灰色。在600px以下，导航单元应响应地缩放到视口的25％，但是对于文本内容，单元缩小为文本大小，图像缩放到图像大小。

任何人都知道如何在iphone上设置表格单元格宽度作为视口的百分比？

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no">
        <style>
            .wrapper {
                width: 100%;
                text-align: center;
                background-color: #ebebeb;
            }
            .container {
                width: 600px;
                max-width: 600px;
                margin: auto;
            }
            .header {
                background-color: #ffffff;
                width: 100%;
            }
            @media (max-width: 600px) {
                html, body, .wrapper, .container, .header, .wrapper-td, .container-td {
                    width: 100% !important;
                    max-width: 100% !important;
                }
            }
        </style>
    </head>
    <body>
        <table class="wrapper">
            <tr>
                <td class="wrapper-td">
                    <table class="container">
                        <tr>
                            <td class="container-td">
                                <table class="header">
                                    <tr>
                                        <td style="width: 25%;">
                                            <a href="#"><img src="http://s9.postimg.org/a3mogw58b/nav_membership.jpg" style="width: 100%;" /></a>
                                        </td>
                                        <td style="width: 25%;">
                                            <a href="#"><img src="http://s9.postimg.org/a3mogw58b/nav_membership.jpg" style="width: 100%;" /></a>
                                        </td>
                                        <td style="width: 25%;">
                                            <a href="#"><img src="http://s9.postimg.org/a3mogw58b/nav_membership.jpg" style="width: 100%;" /></a>
                                        </td>
                                        <td style="width: 25%;">
                                            <a href="#"><img src="http://s9.postimg.org/a3mogw58b/nav_membership.jpg" style="width: 100%;" /></a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
    </html>

Answer 1

尝试将html, body{margin:0; padding:0}添加到样式中，并cellpadding="0" cellspacing="0"添加到所有表格中。

Codepen：http://codepen.io/Bidstrup/pen/LVobpG

Html表格单元格对iphone电子邮件无响应

1 个答案: