Yahoo Mail 和 Gmail 应用程序未在媒体查询中呈现高度属性

Question

我正在尝试为我的客户构建一个 EDM，我希望元素的高度在移动设备上更新，但似乎特别是高度属性不会在 iOS 的 Yahoo Mail App 上显示Android.

的 Gmail 应用程序

我的 style 标签和媒体查询都在 HTML 文件的头部和主体部分。 background-color 有效，所以我知道电子邮件引用了 style 标签，但高度保持在 50px 而不是在移动设备上更新为 10px。

样式标签：

<style>
@media only screen and (max-width:600px){
.mobile-height-10{ background:green !important; max-height:10px !important; min-height:10px !important; height:10px !important; }
}
</style>

HTML 这里：

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f2f2f2" align="center" id="edmTable" style="width:100%;padding:0;margin:0;border:none;outline:0;">

  <tr>
    <td>
      <table width='100%' border='0' cellspacing='0' cellpadding='0' bgcolor='#f4f4f4' align='center' class='full-width' style="width:100%;min-width:100%;background-color:#f4f4f4;">
        <tr>
          <td align="center">
            <table width='600' border='0' cellspacing='0' cellpadding='0' align='center' bgcolor='#f4f4f4' class='mobile-full-width' style="width:600px;background:#f4f4f4;">
              <tr>
                <td width="100%" height="50" style="font-size:1px; line-height:0px;min-height:50px;min-width:100%;" class="mobile-height-10">&nbsp;</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>

  </table>

据我了解，高度属性在媒体查询中应该可以正常工作：https://www.campaignmonitor.com/css/media-queries/min-height/

是否有人可以与我分享关于为什么这没有按预期工作的任何见解？

非常感谢您的帮助
萌

Answer 1

这是您的代码中的一个工作示例。我刚刚对其进行了测试，它适用于 Gmail 应用程序（头部媒体查询）和 Yahoo（主体媒体查询）。

我没有更改媒体查询，因为您有理由将其保持在 600 像素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>title</title>
 <style type="text/css">
 @media only screen and (max-width:600px){
.mobile-height-10 img{width:10px !important; height:10px !important;background-color:green !important;}
}

    </style>
</head>
<body bgcolor="#ffffff" class="body" dir="ltr" style="padding:0; margin:0; display:block; background:#ffffff; -webkit-text-size-adjust:none">
<style type="text/css">@media only screen and (max-width:600px){
.mobile-height-10 img{width:10px !important; height:10px !important;background-color:green !important;}
}
 </style>
<table align="center" bgcolor="#f4f4f4" border="0" cellpadding="0" cellspacing="0" class="mobile-full-width" style="background:#f4f4f4;">
  <tbody>
    <tr>
      <td bgcolor="#ff0000" class="mobile-height-10" style="line-height:0px;"><img src="https://i.stack.imgur.com/mKmlV.png" style="max-width:50px;height:auto;"  /></td>
    </tr>
  </tbody>
</table>
</body>
</html>

干杯

Yahoo Mail 和 Gmail 应用程序未在媒体查询中呈现高度属性

Yahoo Mail & Gmail App not rendering height property in media query

html

css

html-email

media-queries

Yahoo Mail 和 Gmail 应用程序未在媒体查询中呈现高度 属性

Yahoo Mail & Gmail App not rendering height property in media query

html

css

html-email

media-queries

Yahoo Mail 和 Gmail 应用程序未在媒体查询中呈现高度属性