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

Question

This has me stumped. 这让我难过。 This works fine in browsers (tested Chrome, Firefox, and Safari), but doesn't work in Chrome emulator, Chrome mobile, or Firefox mobile. 在浏览器（经过测试的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>

My original problem was more complex, but even boiling it down to the simplest form it's not working. 我最初的问题比较复杂，但是即使简化为最简单的形式也无法解决。 Tried the above with different combinations such as display: inline-block; 使用不同的组合（例如display: inline-block;尝试了上述操作display: inline-block; instead of float: left; 而不是float: left; , different viewport meta tags, adding only screen to the media query, other tags than plain div s, etc. ，不同的视口元标记， only screen添加到媒体查询，除普通div的其他标记等。

My original problem surfaced when doing work with Web Components + ShadowDOM, but it doesn't seem to be related to those. 使用Web Components + ShadowDOM时，我最初遇到的问题浮出水面，但似乎与这些问题无关。 Made sure to bust all my caches while testing. 确保在测试时关闭我所有的缓存。

Am I going nuts? 我疯了吗？

Answer 1

Oh wow I'm dumb. 哦，我笨。 Had a typo in the meta tag. 在meta标签中有错别字。 Should be name instead of title : 应该是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