为什么 Chrome 开发者工具在模拟移动设备时设置这么大的视口大小？

Question

我有一个测试文档如下：

<html>
  <head></head>
  <body></body>
</html>

所以它只是一个空文档。在正常浏览器模式下，我得到一个漂亮的空白页面，没有滚动条。

但是，当我打开开发工具并打开移动仿真（例如，索尼 Xperia Z、Z1）时，我看到滚动条（水平和垂直），并且 html 元素大小为 980x1742。这是从哪里来的？高度不应该至少为零吗？

Answer 1

要使页面与屏幕大小完全相同（不缩放或以其他方式），请将其放在标题中：

<meta name="viewport" content="width=device-width, initial-scale=1">

在 Mozilla 的开发者网站上有更多关于它的信息，以及您可能会发现有用的其他参数。

在我将 vom Bootstrap 3.x 更改为 4.x 后（并且我已经在标题中添加了视口标签），我现在遇到了同样的问题。如果我选择一个设备，宽度（右侧）有空白区域，我必须双击 GC 中的移动视图才能展开视图。在旧版本（BS 3.x）中它仍然按预期工作。所以我认为。我的问题与 BS4 有关。有人给我提示吗？...谢谢。 (2认同)