在android nexus 5(4.4.2)本机邮件应用程序上响应html电子邮件_app

概述我有一个测试布局,它使用表格显示两列和媒体查询,它们将两列叠加到支持媒体查询的电子邮件客户端上.我坚持使用表而不是div,因为我们还需要支持Outlook :(.布局在 Android 4.3及以下版本中工作得很好(列叠加)但在Nexus 5(Android 4.4.2)上爆炸.两列第二列完全被挤压后仍然显示在彼此旁边.似乎4.4.2不支持td的显示块.有没有其他人经历过这个？如果是的话,有没有解我有一个测试布局,它使用表格显示两列和媒体查询,它们将两列叠加到支持媒体查询的电子邮件客户端上.我坚持使用表而不是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[] {                wIDth: 100%!important;            }            td[] {                background-color: #cc3333;                wIDth: 100%!important;                display: block!important;            }        }    </style></head><body>    <table wIDth="640" align="center" cellpadding="0" cellspacing="0" >        <tr>            <td >Hello world</td>            <td >Hello world</td>        </tr>    </table></body></HTML>

编辑1/14因此使用表作为块元素可以正常工作.由于表是浮动的(使用对齐),因此在宽度小于640px的情况下进行包装.现在唯一的问题是,当两个表换行时,由于它们的宽度设置为320px,文本在原始分辨率超过320px但小于640px的设备上不会回流到100％(比如iPhone在横向模式下为480px )而是包裹在320px(在右边留下大约160px的空白区域).我知道我可以使用媒体查询更改宽度,但遗憾的是它不适用于Gmail应用程序(grrh).有什么想法/建议？简单的桌面结构 –

<table align="center"   cellpadding="0" cellspacing="0">    <tr>        <td>            <table align="left"  border="1">                <tr>                    <td >long text which should take about 480px                    </td>                </tr>            </table>            <table  align="left">                <tr>                    <td >long text which should take about 480px                    </td>                </tr>            </table>        </td>    </tr></table>

解决方法我认为,最好只使用表格为你的CSS样式,因为td标签更难以预测

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

总结

以上是内存溢出为你收集整理的在android nexus 5(4.4.2)本机邮件应用程序上响应html电子邮件全部内容，希望文章能够帮你解决在android nexus 5(4.4.2)本机邮件应用程序上响应html电子邮件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1135435.html

在android nexus 5(4.4.2)本机邮件应用程序上响应html电子邮件

发表评论

评论列表（0条）