媒体查询在手动调整浏览器大小时有效，但在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检查工具中的“响应式”功能进行测试时，第一个断点：

@ 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）