移动Gmail应用程序中的媒体查询不起作用

Media Query is not working in mobile gmail app(移动Gmail应用程序中的媒体查询不起作用)
本文介绍了移动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相关的媒体查询移动到可能的最高点。

这篇关于移动Gmail应用程序中的媒体查询不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

how to remove this error quot;Response must contain an array at quot; . quot;.quot; while making dropdown(如何删除此错误quot;响应必须在quot;处包含数组。创建下拉菜单时(Q;))
Why is it necessary to use `document.createElementNS` when adding `svg` tags to an HTML document via JS?(为什么在通过JS为一个HTML文档添加`svg`标签时,需要使用`Document.createElementNS`?)
wkhtmltopdf print-media-type uses @media print ONLY and ignores the rest(Wkhtmltopdf print-media-type仅使用@media print,而忽略其余内容)
price depend on selection of radio input(价格取决于无线电输入的选择)
calculate price depend on selection without button(根据没有按钮的选择计算价格)
What should I consider before minifying HTML?(在缩小HTML之前,我应该考虑什么?)