在第二個文件中時，媒體查詢無法在移動設備上運行

Question

我已經閱讀了關於stackoverflow的大量主題，以解決此問題，但還沒有找到任何解決方法。

那就是我得到的：

我使用Bootstrap 3獲得了一個Web模板。其中包括以下META標簽：

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

還包括以下CSS文件：

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/gamebooster.css">

現在，當我使用一些引導程序的xs類時，一切似乎都可以正常工作。 我現在要做的是僅在用戶使用移動設備時，在特定的框內添加填充並更改徽標的高度。

因此，我嘗試了以下代碼：

@media (max-width: 767px) {
.navbar .navbar-brand img {
    width: 50px !important;
} }

如果縮小瀏覽器窗口，它似乎可以正常工作，但是當我在手機上嘗試時，它根本無法工作。 令人好奇的是：我正在使用與引導程序完全相同的媒體查詢，它似乎可以工作。 我究竟做錯了什么？

謝謝，費邊

Answer 1

嘗試這個：

@media screen and (max-width: 767px) {
    -----

}

並不要忘記使用以下元標記：

<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />

Answer 2

只是嘗試使用

@media (max-width: 767px) {
  width:50px !important;;
  max-width:50px !important;
}