Html 响应断点在浏览器中工作，但在Chrome中不能在iPhone emulator中工作

我正在建立一个响应性网站，我使用SASS mixin像这样设置断点

@mixin breakpoint($point) {
   @if $point == laptop {
     @media (max-width: 1600px) { @content ; }
  }
    @else if $point == tablet {
     @media only screen 
      and (min-device-width : 768px) 
      and (max-device-width : 1024px) { @content ; }
  }
  @else if $point == mobile {
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 568px)  { @content ; }

  }
}

我头上有这个

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

当我调整浏览器窗口的大小时，断点完全适用，一切正常，断点完全适用。Chrome、Safari、Firefox等等

但是当运行iPhone或iPad的Chrome iOS模拟器（纵向）时，断点不起作用，我得到了这个可怕的侧滚动条。我甚至强迫包装为200px，我可以看到所有适合这个空间的东西，但HTML和正文似乎仍然比手机屏幕大得多

---

关于为什么断点在浏览器上工作得很好，但在iOS上却失败得很惨，有什么线索吗？

可能是Cimmanon的复制品。。。谢谢你，伙计！完全是这样。我尝试过搜索，但从未想过这是一个最大设备宽度的问题。我把整个东西改成了max width，看起来效果不错。再次感谢！