极其基本的媒体查询无法在移动设备上运行

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