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;而不是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 个答案: