ios - 响应式表格在除默认 iOS 7 邮件应用程序之外的所有内容中都能完美呈现

Question

默认的 iOS 7 (iOS 7.1.1) 邮件应用程序无法正确呈现此表格。 Chrome、Firefox 和 Safari(最新版本)都完美地呈现了桌面 View 和移动 View 。 Internet Explorer 可以正确呈现桌面 View ，但不能正确呈现移动 View (这很好)。 iOS Safari 完美呈现移动 View 。 Here is a JSFiddle当您调整它的大小时，这表明它可以正常工作。 Here is a screenshot它在 iOS 邮件中的呈现方式。

HTML

<div id="responsive-table">
<table class="body-copy" style="font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
    <thead>
        <tr>
            <th>Item #</th>
            <th>Description</th>
            <th>Qty</th>
            <th>Price</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>#####1</td>
            <td>Item Description goes here I</td>
            <td>1</td>
            <td>$9.49</td>
            <td>$9.49</td>
        </tr>
        <tr>
            <td>#####2</td>
            <td>Item Description goes here II</td>
            <td>2</td>
            <td>$9.99</td>
            <td>$19.98</td>
        </tr>
        <tr>
            <td>#####3</td>
            <td>Item Description goes here III</td>
            <td>4</td>
            <td>$3.79</td>
            <td>$15.16</td>
        </tr>
        <tr>
            <td>#####4</td>
            <td>Item Description goes here IV</td>
            <td>1</td>
            <td>$17.94</td>
            <td>$17.94</td>
        </tr>
        <tr>
            <td>#####5</td>
            <td>Item Description goes here V</td>
            <td>3</td>
            <td>$4.99</td>
            <td>$14.97</td>
        </tr>
    </tbody>
</table>
</div>

CSS

@media screen and (max-width: 480px) {
/* Force table to not be like tables anymore */
#responsive-table table, thead, tbody, th, td, tr {
    display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#responsive-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
#responsive-table tr {
    border: 1px solid #ccc;
    margin-bottom: 25px;
}
#responsive-table td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 42% !important;
}
#responsive-table td:before {
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
}
#responsive-table td:nth-of-type(1):before {
    content:"Item #";
}
#responsive-table td:nth-of-type(2):before {
    content:"Description";
}
#responsive-table td:nth-of-type(3):before {
    content:"Quantity";
}
#responsive-table td:nth-of-type(4):before {
    content:"Price";
}
#responsive-table td:nth-of-type(5):before {
    content:"Total";
}
}

#responsive-table{margin:0 0 20px 0;}
#responsive-table table{width:100%;border-collapse:collapse;}
#responsive-table th{background:#43904B;font-weight:bold;color:#FFFFFF;}
#responsive-table td,th{padding:7px 16px;text-align:left;border:0;border-style:solid;border-bottom:thin solid #E6E6E6;}

我尝试过的一些事情:

• 通过 Apple iCloud 邮件将电子邮件发送到同一部 iPhone。结果:没有变化。
• 在 Gmail iOS 应用程序中查看电子邮件。结果:呈现完美。
• 删除了所有评论(你永远不知道)。结果:没有变化。
• 已更改 <meta name="viewport" content="width=320, target-densitydpi=device-dpi">至 <meta name="viewport" content="width=device-width, initial-scale=1.0">结果:没有变化。

杂项

如果有任何帮助，这就是 useragentstring.com 告诉我用户代理用于邮件应用程序的内容(我在 iframe 中给自己发送了一封电子邮件。不知道这是否正确。)。

Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D201

当您使用浏览器查看页面时，最后缺少有关 Safari 的部分。

Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D201 Safari/9537.53

出于好奇，我开始了 with this .

更新

• 已添加 word-wrap: normal !important;到 #responsive-table td {}，它修复了垂直文本故障。
• Changing position: relative; to position: absolute; 导致以下屏幕截图。这不是我想要的，但邮件应用程序确实以与浏览器相同的方式呈现它。显示邮件应用不喜欢position: relative; .

Answer 1

您遇到问题的原因是因为您使用了很多电子邮件客户端不支持的代码。使某些东西在浏览器中看起来不错很容易，当您为电子邮件编写代码时，您必须记住将代码简化到极致。没有花哨的东西。

无需深入探讨该主题。您不应使用 XHTML1 成为标准时不存在的任何代码，因为大多数电子邮件客户端都基于 XHTML1 文档类型。您还应该尝试尽可能多地使用 HTML 而不是 CSS，因为电子邮件中的 CSS 很糟糕。

我为使您的代码正常工作所做的更改:

1. 样式是在每个单元格上定义的，因为电子邮件中的固有样式是不可靠的。
2. 删除了边框样式以支持产生相同效果的 HTML 表格属性 rules=rows frame=box
3. 行高已转换为像素值而不是百分比，因为您会发现电子邮件中的百分比值有时会出错，特别是行高(在 Outlook 中不起作用)
4. 您使用的所有高级 CSS 都已删除，因为它在电子邮件中完全不受支持，而且根本不需要。
5. 不支持 CSS 定位属性(顶部、右侧、底部、左侧、绝对、相对等)

---

这是您的完整代码。我没有花时间完全匹配您的内容，您必须自己做。我只是将同一部分复制了三遍来为您证明示例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        html,body {width:100% !important;-webkit-text-size-adjust:none;margin:0;}
        body, td{-webkit-text-size-adjust:none;}
        .ReadMsgBody, .ExternalClass {width: 100% !important;background-color:#ffffff;}
        .ExternalClass * {line-height: 100%} 
        table { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
        table td {border-collapse: collapse;}
        table.responsive {width:600px;}
        @media screen and (max-device-width: 600px), screen and (max-width: 600px) {
            table[class="responsive"]{width:100%;}

        }
    </style>
</head>

<body bgcolor="#ffffff" border="0" style="min-width:100%;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;color:#666666;font-family:Arial,sans-serif;">

<center>
<table width="100%" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" valign="top">
            <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td>
                            <table align="center" class="responsive" rules=rows frame=box style="font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Item #</b></th>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">#####1</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Description</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">Item Description goes here</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Qty</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">1</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Price</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Total</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
                                </tr>
                            </table>
                            <table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
                            <table rules=rows frame=box width="100%" style="max-width:600px;font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Item #</b></th>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">#####1</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Description</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">Item Description goes here</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Qty</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">1</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Price</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Total</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
                                </tr>
                            </table>
                            <table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
                            <table rules=rows frame=box width="100%" style="max-width:600px;font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Item #</b></th>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">#####1</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Description</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">Item Description goes here</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Qty</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">1</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Price</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
                                </tr>
                                <tr>
                                    <td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Total</b></td>
                                    <td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>
</center>
</body>
</html>

---

测试结果

iOS 邮件

谷歌邮箱

美国在线

雅虎