为什么Chrome Developer Tools在模拟移动设备时会设置如此大的视口大小？

Question

I have a test document as follows: 我有一份测试文件如下：

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

So it's just an empty document. 所以它只是一个空文档。 In normal browser mode, I get an nice empty page, no scrolls. 在普通的浏览器模式下，我得到一个漂亮的空页，没有滚动。

But when I open devtools and turn on mobile emulation (for example, Sony Xperia Z, Z1), I see scroll bars (both horizontal and vertical), and html element size is 980x1742. 但是当我打开devtools并开启移动仿真时（例如，Sony Xperia Z，Z1），我看到滚动条（水平和垂直），html元素大小为980x1742。 Where does this come from? 这是从哪里来的？ Shouldn't it be at least zero height? 它不应该至少为零高度？

Answer 1

To make your page the exact size of the screen (no zooming or otherwise), place this in the header: 要使您的页面成为屏幕的确切大小（无缩放或其他），请将其放在标题中：

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

There's some more info about it, as well as additional parameters you may find useful, on Mozilla's developer site here . 这里也有一些关于它的更多信息，以及其他参数，可能对你有用，Mozilla的开发者网站在这里。

为什么Chrome Developer Tools在模拟移动设备时会设置如此大的视口大小？

问题描述

1 个解决方案

解决方案1
4 2015-03-20 22:33:18

为什么Chrome Developer Tools在模拟移动设备时会设置如此大的视口大小？

问题描述

1 个解决方案

解决方案1 4 2015-03-20 22:33:18

解决方案1
4 2015-03-20 22:33:18