Question

我正在尝试为我的客户端构建一个EDM，我希望在移动设备上更新elment的高度，但似乎具体的高度属性不适用于iOS的Yahoo Mail App和Android的Gmail App。

我的style标记和媒体查询都位于HTML文件的head和body部分。 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 here：

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

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

是否有任何机构有任何见解他们可以与我分享为什么这不能按预期工作？

非常感谢您的帮助萌

Answer 1

以下是您的代码中的一个工作示例。我刚测试了它，它适用于Gmail应用程序（头部媒体查询）和雅虎（体内媒体查询）。

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

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

干杯

雅虎邮箱＆amp; Gmail应用无法在媒体查询中呈现高度属性

1 个答案: