媒体查询在移动 gmail 应用程序中不起作用答案

【问题标题】：Media Query is not working in mobile gmail app媒体查询在移动 gmail 应用程序中不起作用
【发布时间】：2017-08-29 04:35:02
【问题描述】：

我正在为 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 应用程序中不起作用。如果我遗漏了什么，请告诉我。

提前致谢

【问题讨论】：

问题是 Gmail 从 html 元素中去除 css 类。您可以使用桌面版 gmail 体验这一点。

标签： html css media-queries

【解决方案1】：

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

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

【讨论】：

然后将“仅屏幕”更改为“屏幕”
仅将屏幕更改为屏幕也无法正常工作。我只在 gmail 移动应用程序中遇到问题，而在其他地方它工作正常。

【解决方案2】：

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

你可以试试这个，它工作正常https://jsfiddle.net/oa5bco0s/

【讨论】：

感谢您的回复。但这在 gmail 移动应用程序中不起作用。
在移动应用中只有一个布局休闲我的事情，为什么你要使用多个布局。

【解决方案3】：

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

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

这个解决方案对我有用。

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

【讨论】：