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

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

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

我的事情你可以试试这个它工作正常https://jsfiddle.net/oa5bco0s/

Answer 3

在您的 html 标头上添加元数据

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