无法在Safari Mobile上完全缩放网页

Question

我在装有iOS 11的iPhone 6S上使用Safari。页面宽度为1100px（或更大），我捏不住要缩小多少，所以我永远无法在页面上一直缩小。当我用手指四处移动时，总是会看到水平滚动条和水平滚动/平移的页面“浮动”。我希望用户能够根据需要进行放大，但是他们应该在页面加载时以完全缩小的方式开始，并且如果需要的话可以在任何时候再次以完全缩小的方式进行缩放。页面应该不响应地改变宽度，并且应该始终位于固定的1100px。

为什么我不能在此页面上一直缩小？ Safari Mobile是否有一些最大宽度值？例如，我可以将其设置为900px，问题就消失了。我在Android设备（Nexus 5X）上的Chrome中没有出现此问题。

Codepen

https://codepen.io/kspearrin/pen/WKRYZG

整页视图： https://s.codepen.io/kspearrin/debug/WKRYZG/DqkDdKEjxQbk

HTML

<div>Some text</div>

CSS

body {
  margin: 0;
  padding: 0;
  color: black;
  background-color: gray;
  width: 100%;
}

div {
  width: 1100px;
  margin: 0 auto;
  text-align: center;
  background-color: red;
}