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

【问题标题】：Why Chrome Developer Tools set such a big viewport size when emulating mobile?为什么 Chrome 开发者工具在模拟移动设备时会设置如此大的视口大小？
【发布时间】：2022-02-24 22:48:02
【问题描述】：

我有一个测试文档如下：

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

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

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

【问题讨论】：

当您在没有模拟设备的情况下查看 devtools 时，html 元素大小的宽度或高度不为零，它完全取决于您的浏览器宽度和高度。
@skrawler - 准确地说，它的宽度等于浏览器宽度，高度为 8px（因为 body 有 8px 边距）。但是在模拟设备时，html 的宽度和高度似乎不知从何而来，这搞砸了页面。

标签： android html css

【解决方案1】：

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

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

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

【讨论】：

我按照你的建议做了，但在移动仿真中它仍然有 980x1742 大小。
我现在有同样的问题，在我将 vom Bootstrap 3.x 更改为 4.x 之后（并且我已经在标题中添加了 viewport 标签）。如果我选择一个设备，宽度（右侧）有空白空间，我必须在 GC 中双击移动视图以展开视图。在旧版本（使用 BS 3.x）中，它仍然可以按预期工作。所以我认为。我的问题与BS4有关。有人给我小费吗？...谢谢。

【解决方案2】：

我必须这样做：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

【讨论】：