Question

我正在为Gmail应用创建一个html模板。我在桌面视图中添加了一个应该占60％的图像，在移动gmail应用视图中添加了100％。

这是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应用程序。如果我遗失了什么，请告诉我。

提前致谢

Answer 1

问题是：Gmail应用程序不是“屏幕”媒体。

@media (max-width: 600px) {
    .mob-img {
    width: 100% !important;
    }
}

此解决方案对我有用。

编辑：Gmail会忽略其他媒体查询。将与Gmail应用程序相关的媒体查询移到最高点。

Answer 2

在你的html标题上添加元

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 3

添加媒体查询<meta name="viewport" content="width=device-width, initial-scale=1.0">

我可以试试这个，它工作得很好https://jsfiddle.net/oa5bco0s/

Media Query无法在移动gmail应用中使用

3 个答案: