分类导航

Android 发布时间：2022-04-28 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了在android nexus 5(4.4.2)本机邮件应用程序上响应html电子邮件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有一个测试布局,它使用表格显示两列和媒体@L_675_3@,它们将两列叠加到支持媒体@L_675_3@的电子邮件客户端上.我坚持使用表而不是div,因为我们还需要支持Outlook :(.布局在 Android 4.3及以下版本中工作得很好(列叠加)但在Nexus 5(Android 4.4.2)上爆炸.两列第二列完全被挤压后仍然显示在彼此旁边.似乎4.4.2不支持td的显示块.有没有其他人经历过这个？如果是的话,有没有解决这个问题？顺便说一下,看起来只有显示块和显示：Nexus 5不支持内联块,如果我在我的媒体@L_675_3@中将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因此使用表作为块元素可以正常工作.由于表是浮动的(使用对齐),因此在宽度小于640px的情况下进行包装.现在唯一的问题是,当两个表换行时,由于它们的宽度设置为320px,文本在原始分辨率超过320px但小于640px的设备上不会回流到100％(比如iPhone在横向模式下为480px )而是包裹在320px(在右边留下大约160px的空白区域).我知道我可以使用媒体@L_675_3@更改宽度,但遗憾的是它不适用于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>