移动Gmail应用程序中的媒体查询不起作用
我正在为Gmail应用程序创建一个html模板。在中,我添加了一个图片,该图片60%显示在桌面视图上,100%显示在移动Gmail应用程序视图上。
这是img标签宽度60%:
<div>
<img src="show.jpg" alt="Show your skills" class="mob-img" border="0"
style="outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;
width:60%;" />
</div>
在媒体查询中,我将其设置为100%。但它在Gmail应用程序中不起作用。
@media only screen and (max-width: 600px) {
.mob-img {
width: 100% !important;
}
}
我不明白为什么这在Gmail应用程序中不起作用。如果我遗漏了什么,请告诉我。
提前感谢
解决方案
问题是:Gmail应用程序不是"屏幕"媒体。
@media (max-width: 600px) {
.mob-img {
width: 100% !important;
}
}
此解决方案适合我。
编辑:Gmail忽略其他媒体查询。将与Gmail App相关的媒体查询移动到可能的最高点。
相关文章