極其基本的媒體查詢無法在移動設備上運行

Question

這讓我難過。 在瀏覽器（經過測試的Chrome，Firefox和Safari）中，此方法工作正常，但在Chrome模擬器，Chrome移動版或Firefox移動版中無效。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta title="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    div {
      width: 50%;
      float: left;
    }

    @media screen and (max-width: 500px) {
      div {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div>Left</div>
  <div>Right</div>
</body>
</html>

我最初的問題比較復雜，但是即使簡化為最簡單的形式也無法解決。 使用不同的組合（例如display: inline-block;嘗試了上述操作display: inline-block; 而不是float: left; ，不同的視口元標記， only screen添加到媒體查詢，除普通div的其他標記等。

使用Web Components + ShadowDOM時，我最初遇到的問題浮出水面，但似乎與這些問題無關。 確保在測試時關閉我所有的緩存。

我瘋了嗎？

Answer 1

哦，我笨。 在meta標簽中有錯別字。 應該是name而不是title ：

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

極其基本的媒體查詢無法在移動設備上運行

問題描述

1 個解決方案

解決方案1
1 2019-04-20 23:37:26

極其基本的媒體查詢無法在移動設備上運行

問題描述

1 個解決方案

解決方案1 1 2019-04-20 23:37:26

解決方案1
1 2019-04-20 23:37:26