了解从 document.documentElement.clientWidth/Height 返回哪个视口，以及与 window.innerHeight/innerWidth 的区别

Question

我对 JavaScript 和 DOM 中的 viewport 的概念有点困惑，尤其是 document.documentElement.clientWidth 应该 return视口的宽度。

事实上，document.documentElement 是 html 元素，无论我是否已经为 html 元素设置了以像素为单位的固定宽度，clientWidth 都会 return 视口尺寸。

现在，当我研究CSS时，我了解到移动浏览器有两个视口，默认视口和理想视口。默认视口对于没有响应技术的浏览器很有用。 ideal视口是我提供RWD机制时使用的视口（在这种情况下我必须使用<meta name="viewport" content="width=device-width, initial-scale=1.0">和媒体查询）。

例如，iPhone 5 的物理屏幕宽度为 640 像素，但其理想视口为 320 像素。此外，还有 视觉视口 和 布局视口 的概念，例如在缩放时发挥作用。

现在我想从 document.documentElement.clientWidth 了解桌面计算机和移动设备 phone 上的哪个视口尺寸 return（如果存在差异）。因为我试过了，我发现 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>

结果（我正在从我的电脑远程调试我的三星 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 更少或更多）。

好的，但我不明白为什么浏览器 window 视口 (innerHeight\innerWidth) 仍然具有相同的视口尺寸 (clientWidth|clientHeight)。我本来希望浏览器 windows 视口保持 560x640。

有人可以给我解释一下吗？

我在 Google Chroome 上测试了这个。

Answer 1

CSSOM View spec defines both window.innerHeight/Width and document.documentElement.clientHeight/Width与相同视口，只是有无滚动条不同，所以应该一起变化。

使用哪个 概念视口并未在此处定义。因为它是由标准正式定义的，所以我认为我们可以认为它使用 CSS Device Adaptation spec.

中描述的 actual viewport

了解从 document.documentElement.clientWidth/Height 返回哪个视口，以及与 window.innerHeight/innerWidth 的区别

Understand which viewport is returned from document.documentElement.clientWidth/Height, and difference with window.innerHeight/innerWidth

javascript

dom

viewport