我在 html 电子邮件中使用了以下代码,它在所有电子邮件客户端中都按预期工作,Android 6.0 Gmail 除外!蓝色的联系我们按钮没有占据 100% 的宽度。
有什么想法吗?
第一个屏幕截图显示了它在真实设备上的样子,而第二个屏幕截图来自 litmus,这是不正确的,但这是我试图让看起来像的。
代码:
.cta {
text-align: left;
vertical-align: middle;
}
@media only screen and (max-width:414px) {
.mobile {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#00a5c9; font-weight: normal;">
<tr>
<td class="cta" style="text-align: left; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; padding: 10px; color: #FFFFFF; vertical-align: top; line-height: normal !important;">
<a style="text-align: left; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">CONTACT US</a>
</td>
<td style="text-align: left; color: #FFFFFF; font-weight: 700;"><img src="http://via.placeholder.com/25/0f0" /></td>
</tr>
</table>
</td>
</tr>
</table>
最佳答案
解决此问题的一个好方法是强制 Android 5.1 和 6.0 显示您的电子邮件的桌面版本。下面的代码 fragment 需要一个 600x1 的透明 png 来充当全宽间隔符。此间隔符将隐藏在所有支持媒体查询并允许呈现移动 View 的移动客户端上。
<tr style="line-height: 1px; mso-line-height-rule: exactly;" class="mobilehide">
<td align="center" style="min-width:600px;font-size:1px; line-height: 1px; mso-line-height-rule: exactly;">
<img src="images/android-spacer.png" alt="" width="600" height="1" style="display: block;" border="0">
</td>
</tr>
这应该添加在最外层表的结束标记之前(结束主体之前的最后一个)
</td>
</tr>
<!-- add here -->
</table>
</body>
</html>
关于android - Android 6 上的表格行未采用 100% 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50110458/