html - 在 Chrome Dev Tools 中模拟移动设备时，HTML 和 body 的大小有什么关系？

我最近尝试在我的手机上加载一个我开发的工具，该工具在我工作的内部托管。

有几件事看起来不对劲，这是我所预料的。但是一个特定的元素似乎特别奇怪。

我最终在 MacBook Pro 上的 Chrome 中加载了该页面，并使用“设备工具栏”功能在我的桌面浏览器中呈现它，就像在手机上一样。为了保持私有应用程序的私密性，我将在 Google.com 上进行演示。这就是我所看到的：

那就body是以蓝色突出显示的元素。html元素是一样的。

这也是我在应用程序中看到的内容，并解释了我在实际使用手机时看到的内容。

对于我的生活，我无法理解为什么这些元素选择了这个尺寸。这些元素没有明确的“宽度”，也没有“最大宽度”等。我看到的任何东西都不会导致这种行为。

谁能解释这种行为？

更新

开发工具似乎有一些奇怪的行为。适当的移动测试可能不应该以这种方式进行（随意改变我的想法，谷歌......）但问题在于，有时，body 元素不会拉伸以适应其内容。

标签： htmlcssgoogle-chromemobile

默认情况下，块级元素，包括<body>，不会扩展以适应其内容，而是会扩展至其容器的宽度。有关详细信息，请参阅规范。

看到这个小提琴证明了这一点。如果您调整面板/窗口的大小，您会看到主体宽度根据视口而变化，但内容宽度绝对没有影响。

另一个没有帮助的问题与 Chrome 开发工具设备工具栏有关。更改缩放、禁用和重新启用设备工具栏及其设置可能有问题，并且并不总是可靠的。由于设备工具栏的功能误导了我，我花了好几个小时寻找实际上并不存在的问题。