【发布时间】：2020-05-16 14:32:15
【问题描述】：
我对 JavaScript 和 DOM 中的 viewport 的概念有点困惑，尤其是应该返回视口宽度的 document.documentElement.clientWidth。
事实上，document.documentElement 是html 元素，无论我是否已经为html 元素设置了固定的像素宽度，clientWidth 都会返回视口尺寸。
现在，当我学习 CSS 时，我了解到移动浏览器有两个视口，默认视口和理想视口。 default 视口对于没有响应技术的浏览器很有用。 ideal 视口是我提供 RWD 机制时使用的视口（在这种情况下，我必须使用 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 和媒体查询）。
例如，iPhone 5 的物理屏幕宽度为 640 像素，但其理想的视口为 320 像素。此外，还有 visual viewport 和 layout viewport 的概念，例如在缩放时发挥作用。
现在我想从document.documentElement.clientWidth 知道台式电脑和手机上返回的视口尺寸（如果有差异）。因为我试过了，我发现window.innerWidth/Height（浏览器内容区域）几乎总是与document.documentElement.clientWidth/Height的值相同（滚动、边距和边框像素值除外）。
这怎么可能？我缺少的 JavaScript DOM 中的“视口”是否有不同的含义？
例如：
<!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>
结果（我正在从我的电脑远程调试到我的三星 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 上对此进行了测试。
【问题讨论】：
标签： javascript dom viewport