android nexus 5（4.4.2）本机邮件应用程序上的响应式html电子邮件答案

【问题标题】：Responsive html email on android nexus 5 (4.4.2) native mail appandroid nexus 5（4.4.2）本机邮件应用程序上的响应式html电子邮件
【发布时间】：2014-01-31 19:48:19
【问题描述】：

我有一个测试布局，它使用表格来显示两列和媒体查询，它在支持媒体查询的电子邮件客户端上将两列堆叠在一起。我坚持使用表格而不是 div，因为我们也需要支持 Outlook :(。布局在 Android 4.3 及更低版本中效果很好（列堆叠）但在 Nexus 5（Android 4.4.2）上爆炸。两列仍然彼此相邻显示，第二列被完全压扁。似乎 4.4.2 不支持 td 的显示块。有其他人经历过吗？如果是，有什么解决方法吗？顺便说一句，似乎只有显示块和显示：内联块在 Nexus 5 上不受支持，如果我在媒体查询中将 tds 设置为 display:none，它们会隐藏在屏幕上。下面是一个基本的 html 电子邮件模板，它不工作：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0;width:device-width">
    <!-- So that mobile webkit will display zoomed in -->
    <title>Email template</title>
    <!-- disable auto telephone linking in iOS -->
    <meta name="format-detection" content="telephone=no">
    <style type="text/css">
        @media screen and (max-width:640px) {
            table[class="container"] {
                width: 100%!important;
            }

            td[class="cell"] {
                background-color: #cc3333;
                width: 100%!important;
                display: block!important;
            }
        }
    </style>
</head>
<body>
    <table width="640" align="center" cellpadding="0" cellspacing="0" class="container">
        <tr>
            <td class="cell">Hello world</td>
            <td class="cell">Hello world</td>
        </tr>
    </table>
</body>
</html>

编辑 1/14 所以使用表格作为块元素是可行的。由于表格是浮动的（使用对齐），因此它们会在宽度小于 640 像素的情况下换行。现在唯一的问题是，当两个表格换行时，由于它们的宽度设置为 320 像素，因此文本不会在原始分辨率大于 320 像素但小于 640 像素的设备上重排至 100%（例如 iPhone 处于横向模式，即 480 像素） ) 而是以 320 像素换行（在右侧留下大约 160 像素的空白区域）。我知道我可以使用媒体查询更改宽度，但不幸的是它不适用于 Gmail 应用程序 (grrh)。有什么想法/建议吗？简单的表结构 -

<table align="center" style="width: 640px;max-width:100%"  cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <table align="left" style="width:49%;" border="1">
                <tr>
                    <td style="max-width: 100%">long text which should take about 480px
                    </td>
                </tr>
            </table>
            <table style="width:49%;max-width: 100%" align="left">
                <tr>
                    <td style="width:100%;">long text which should take about 480px
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

【问题讨论】：

我确实找到了一种处理它的方法，使用表格并按照此处stackoverflow.com/questions/17674172/… 的建议对其应用块。这似乎确实有效，但仍然欢迎任何其他建议。
上面的链接是一种浮动技术，不需要媒体查询即可运行。如果您有 2 个相同大小的列，它非常适合，尽管您总是可以在事后在媒体查询中调整它们。但单独来看，恕我直言，它是一种优于媒体查询的技术，因为它适用于 Gmail 和其他不支持 MC 的客户端。（我可能作为写它的人有偏见）
@John - 我同意，因为大多数使用 gmail 的人会使用 gmail 应用程序而不是本机电子邮件应用程序！
table 方法的问题在于它从根本上破坏了前景，特别是随着 table 复杂性的增加，所以不是一个全面的解决方案。 :(
niaccrushi：我同意。实际上，使用表格会破坏从 Outlook 转发/回复响应式邮件的布局。原因是您使用 mso-table-rspace/lspace 样式控制表格间距，当您转发邮件时，这些样式会被网络邮件删除。这主要导致您的紧凑 n 列布局在 Outlook 中换行。 Outlook 在每个包含文本的表格之后添加
，从而在将其从 Outlook 转发到网络邮件时产生可怕的级联效应。也许，转发/回复时事通讯是一个边缘案例，但奇怪的是没有人真正关心。

标签： android html email responsive-design

【解决方案1】：

我认为，你的 css 样式最好只使用 table，因为 td 标签更难以预测

您可以在此处找到一个很好的 2 列布局示例：
http://www.campaignmonitor.com/guides/mobile/responsive/

【讨论】：

这就是我现在一直在做的事情 - 更改为表格而不是使用 tds 作为块元素。唯一的缺点是两个表是水平的，我无法想出第 2 列内容与第一列底部垂直对齐的策略
我知道这是不久前的事了，但我最近遇到了同样的问题。我有两张桌子，一张左对齐，一张右对齐。在媒体查询中，为了让表格在彼此下方水平对齐，我将 float 设置为 none 并设置 margin 以使表格居中：table { float:none !important; margin:0 auto !important; }

【解决方案2】：

我参加聚会可能有点晚了，但对于那些仍然遇到这个问题并需要一个可靠的解决方案同时保持代码干净的人，这里有一个：

使用您的最佳实践，而不是使用<td> 进行多列布局，而是使用<th>。并在它们上面加上 align="left" 和 font-weight: normal; 以覆盖它的标准样式。

<th> 在 4.4 中仍然表现出响应性，而 <td> 则没有。

我希望这会有所帮助。

附：如果您还想要 gmail 应用程序的移动设备，您可能还想尝试响应式移动优先变体：http://julie.io/writing/responsive-layout-email-ux-munich-newsletter/

【讨论】：

【解决方案3】：

请尝试 gmail android app hack 并使用 th 而不是 td。我将此布局代码用于电子邮件模板。此代码在除 iphone 之外的所有电子邮件客户端上显示两列。此代码在 iphone 上显示了两个块内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0;width:device-width">
    <!-- So that mobile webkit will display zoomed in -->
    <title>Email template</title>
    <!-- disable auto telephone linking in iOS -->
    <meta name="format-detection" content="telephone=no">
    <style type="text/css">
        .gmailfix {display:none;display:none!important;}

        @media only screen and (max-width: 640px) {
            *[class].ablock { 
                display:block !important; 
                text-align:center;
                background-color: #cc3333;
                width: 100%!important;
                display: block!important;
            }
        }

        @media screen and (max-width:480px) {
            .tblock{
                display: block !important;
                text-align: center !important;
                max-width:600% !important;
                width:100% !important;
            }
        }

    </style>
</head>
<body>
<div class="gmailfix" style="white-space:nowrap;line-height:0;">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</div>
    <table align="center" style="width: 640px;max-width:100%"  cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <table class="tblock" style="width:100%;">
                <tr>
                    <th class="ablock">long text which should take about 480px
                    </th>                
                    <th class="ablock">long text which should take about 480px
                    </th>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

【讨论】：