我设计了一个具有框大小的响应式网页：border-box。在桌面浏览器web检查器的移动视图中，所有的盒装/填充元素都非常适合。
但当我切换到真正的移动设备(带Chrome和内置浏览器的Android(时，框的大小似乎被迫调整为内容框，我会进行可怕的水平滚动，如果有内容框，则会添加大致相同大小的边距和填充。
我尝试了一些不同的css，比如
* {box-sizing: border-box}
html {box-sizing: border-box} * {box-sizing: inherit}
every, single, boxed, element {box-sizing: border-box}
什么都不管用。
这个代码every, single, boxed, element {width: 90%}来删除水平滚动，所以没有比屏幕宽度更宽的隐藏元素。
为什么移动浏览器会强制内容框？有任何线索和有效的解决方案吗？
是否为正文设置了边距：0？如果你在html周围使用水平边距自动的包装器，我认为你会去掉水平滚动条，浏览器的大小调整/缩放会更轻松。
<body>
<div class="page">
<!-- your html here -->
</div>
</body>
html, body {
margin: 0;
}
.page {
width: 100%;
margin: 0 auto;
padding: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
切换到屏幕相关单元运行良好！移动浏览器永远不会让自己忽略这种类型的单位，所以如果我们从百分比切换到viewWidth，就永远不会出现水平滚动。
解决方案：
@media screen and (max-width: 600px) {
body {max-width: 100vw}
}