当我手动调整浏览器大小时，媒体查询可以工作，但当我使用 Chrome 的“检查”中的“响应式”功能时，媒体查询不起作用

Question

我正在研究我的响应式设计。这就是我的 @media 断点：

@media (max-width:800px) and (min-width:400px)  {

  #section {
    padding: 0px;
    padding-top:100px;
  }
  .text {
    text-align: center;
    padding-left: 50px;
    width:350px; 
  }
  .headline{
    height: 50px;
    width: 350px;
    text-align: center;

  }
  .header {
    padding-top: 200px;
    background-color: lightgrey;
  }
  .w-70 {
    width: 20%;
    background-color: blue;
  }
  .w-15 {
    width: 40%;
  }
}

@media (max-width: 1100px) and (min-width: 801px) {
.header {
    height:350px;
    background-color: red;
    font-size: 2em;
  }
.w-70 {
    display: none;
  }
  .w-15 {
    width: 40%;
  }
}

当我手动调整浏览器大小以测试 Chrome 中的响应能力时，一切正常并且断点相对应。当我使用Chrome Inspection工具中的“响应式”功能进行测试时，第一个断点：

@media（最大宽度：800px）和（最小宽度：400px）

没有回应。我被告知检查工具是测试响应式设计的更准确方法，因此我想知道我应该信任哪一个以及为什么一个工具会做出响应而不是另一个。

我似乎看不出代码中的问题出在哪里，我尝试过硬刷新并重新启动 chrome，看看它是否可以在“检查”中工作，但都无济于事。

有谁知道为什么一个在工作而另一个不工作？我应该选择哪一个？如果一个有效，另一个就不能工作吗？

任何建议都会有所帮助：无论是我的代码，还是为什么一种测试方法有效而另一种则无效。我对编码相当陌生！

我也有标签

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

在我的脑海中，因为我读过一些我应该读的地方，但说实话，我不确定它的作用，或者它是否会对这个问题产生任何影响。

提前致谢！！

Answer 1

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

这对我有用（请参阅minimum-scale=1）