响应断点在浏览器中工作，但在Chrome中不适用于iPhone模拟器

Question

我正在建立一个响应式网站，我使用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和Body似乎仍然比手机屏幕大得多。

关于为什么断点在浏览器上运行良好但在iOS上惨遭失败的任何线索？