我对以下概念有些困惑 视口 在JavaScript和DOM中，尤其是 document.documentElement.clientWidth 应该返回视口的宽度。
事实上。document.documentElement 是 html 元素，也不管我是否已经设置了一个固定宽度（px）的 html 元素。clientWidth 将返回视口尺寸。
现在，当我学习CSS时，我了解到手机浏览器有两个视口，默认视口和理想视口。默认视口和理想视口。默认 视口对于没有响应技术的浏览器来说是很有用的。浏览器的 理想 viewport是当我提供了RWD机制时使用的视口（在这种情况下，我必须使用 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 和媒体查询 )。
例如，iPhone 5的物理屏幕宽度为640 px，但其理想的视口是320 px。 此外，还有一个概念是 视口 和 视口 例如，当有变焦时，就会发挥作用。
现在我想知道 document.documentElement.clientWidth 在桌面电脑和手机上都能返回哪个视口维度（如果有差异的话）。因为我试过，我发现 window.innerWidth/Height 浏览器内容区）几乎都是相同的值。document.documentElement.clientWidth/Height(滚动、边距和边框像素值除外)。
这怎么可能呢？ 在JavaScript DOM中，"viewport "是否有不同的含义，而我又忽略了？
比如说
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Experiment</title>
<style>
p{
float:right;
width:20%;
}
</style>
</head>
<body>
<p id="par">Hello</p>
<script>
console.log(window.innerHeight);
console.log(window.innerWidth);
console.log(document.documentElement.clientHeight);
console.log(document.documentElement.clientWidth);
console.log(screen.height);
console.log(screen.width);
</script>
</body>
</html>
结果是(我在从我的PC到我的三星Galaxy A5的远程调试中，本地服务器为我的网页服务)。
560//browser window viewport (innerHeight)
360
560//viewport (document.documentElement.clientHeight)
360
640 //screen size
360
视口和浏览器的视口是一样的。到目前为止，我可以接受它。现在，同样的页面，但我得到的方式，这个元标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我得到的。
1524 //browser window viewport (innerHeight)
980
1524 //viewport (document.documentElement.clientHeight)
980
640 //screen size
360
我如何预期的视口大小被改变，没有元标签，因为该页面是映射在上的 默认视口 (1540x980)，以后在物理像素上会有所缩小(640x360少一点或多一点)。
好吧，但我不明白为什么浏览器窗口视口(innerHeight\innerWidth)仍然具有相同的视口尺寸(clientWidth|clientHeight). 我本以为浏览器窗口的视口会保持560x640。
谁能给我一个解释？
我在Google Chroome上进行了测试。
的 CSSOM 查看规格 同时定义了 window.innerHeightWidth 和 document.documentElement.clientHeightWidth）。 就 一样 视口，只是在是否包含滚动条上有所不同，所以它们应该总是一起变化。
哪些 但那里并没有定义使用名义视口。因为它是由一个标准正式定义的，我想我们可以认为它使用的是 实际视口 如上所述 CSS设备适应规范.