代码之家 › 专栏 › 技术社区 › Adam ZBWR

Android 6上的表行未采用100%宽度

html-email html-table css html android

Adam ZBWR · 技术社区 · 6 年前

我在html电子邮件中使用了下面的代码,除Android 6.0 Gmail外,它在所有电子邮件客户端中都能正常工作!蓝色的“联系我们”按钮没有占据全部宽度。

有什么想法吗?

第一个屏幕截图显示了它在真实设备上的样子,而第二个屏幕截图来自石蕊,这是不正确的,但这正是我想让它看起来的样子。

代码:

.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>

3 回复 | 直到 6 年前

gj-wes 6 年前

解决这个问题的一个好方法是强制Android 5.1&6.0显示电子邮件的桌面版本。下面的代码段需要一个600x1的透明png作为全宽间隔符。此间隔符将隐藏在所有支持媒体查询并允许移动视图渲染的移动客户端上。

  <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>

Dmitry Khotinskiy 6 年前

而不是使用 width: 100%; ,尝试使用 width: 100vw;

gwally 6 年前

Android和Gmail的某些版本不使用媒体查询。

https://www.campaignmonitor.com/css/media-queries/media/

这就是为什么蓝色联系人按钮只占据Android屏幕的1/3,但在IOS设备上它却占据了100%的屏幕。IOS将尊重媒体查询,Android将使用 width="33%" 从表中:

<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">

由于您不会像预期的那样在堆栈溢出上发布其余代码,因此我无法提供解决方法的建议,因为我不确定您想做什么。至少你现在知道它为什么不起作用了。

祝你好运