Css iPhone6的客户端宽度为'；它与屏幕宽度大不相同，导致我的媒体查询无法正常工作

如果我在ChromeDevTools中使用iPhone 6/7/8设置查看此内容，它将准确显示我希望它显示的内容（屏幕截图：）。请注意，clientWidth和screen.width是相同的

但如果我在实际的iPhone6上查看它，页面呈现的比视口大，我必须向左滑动才能看到其余部分（屏幕截图：）

请注意，即使屏幕宽度仅为375，clientWidth仍为569。我有一个媒体查询设置，可以在400以下更改某些样式，我相信这个膨胀的clientWidth可以防止媒体查询触发

我已经在标题中包含了

知道为什么会这样吗

---

（我只拥有一部物理手机，因此无法在任何其他手机上进行测试）。

codepen在手机上看起来不错吗？我刚刚意识到，如果我在codepen的调试视图中查看手机上的codepen，它会准确地显示我想要的效果。只有当我处于CodePen的常规全屏模式时，我才有问题。所以它一定是CodePen、flexbox和iPhone的某种组合（或者可能都是移动的，还没有尝试过其他任何东西）。每当我去掉这三个元素中的任何一个，它都会起作用。但当这三个因素都起作用时，我就有了问题。