媒體查詢在移動 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">