google-chrome - 媒体查询在我手动调整浏览器大小时有效，但在我使用 Chrome 的 'Responsive' 中的 'Inspection' 功能时无效

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工具中的“Responsive”特性进行测试时，第一个断点:

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