Media Queries work when I resize my browser manually, but not when I use the 'Responsive' feature in Chrome's 'Inspection'

Question

I am working on my responsive design. This is what I have for my @media breakpoints:

@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%;
  }
}

When I resize the browser manually to test the responsiveness in chrome everything functions correctly and the breakpoints correspond. When I use the "Responsive" feature in the Chrome Inspection tool to test, the first breakpoint:

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

does not respond. I was taught the the Inspection tool is the more accurate way to test your responsive design so I'm wondering which one I should trust and why one responds and not the other.

I can't seem to see where the problem is in my code and I've tried hard refreshes and restarting chrome to see if it will then work in "Inspection" but both to no avail.

Does anyone know why one is working and the other is not? Which one should I go by? If one works, shouldn't the other work?

Any advice would be helpful: with either my code, or why one testing method is working and not the other. I'm fairly new to coding!

I also have the tag

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

in my head because I read somewhere I should, but to be honest I'm not sure what it does, or if it would have any effect on this problem.

Thanks in advance!!

Answer 1

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

This works for me (see the minimum-scale=1)