gpt4 book ai didi

html - 雅虎邮件和 Gmail 应用程序未在媒体查询中呈现高度属性

转载 作者:行者123 更新时间:2023-11-28 15:05:25 42 4
gpt4 key购买 nike

我正在尝试为我的客户构建一个 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>

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

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

非常感谢您的帮助

最佳答案

这是您的代码中的一个工作示例。我刚刚对其进行了测试,它适用于 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="/image/mKmlV.png" style="max-width:50px;height:auto;" /></td>
</tr>
</tbody>
</table>
</body>
</html>

干杯

关于html - 雅虎邮件和 Gmail 应用程序未在媒体查询中呈现高度属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49483995/

42 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com