了解移动设备上的方向，宽高比和CSS像素

Question

对于我当前的项目，我需要针对移动设备优化横向模式的页面布局。您能帮助我了解浏览器窗口大小的不同测量方法吗？

我正在使用硬件像素尺寸为720 x 1280像素的Android智能手机。

肖像模式在纵向模式下，当我使用JavaScript获取document.documentElement.clientWidth和~Height时，我得到结果980 x 1394。

当我使用以下CSS ...

  html {
    height: 100vh;
    width: 100vw;
  }
  body {
    height: 100%;
    width: 100%;
    margin: 0;
  }

... Chrome开发工具报告身体的大小是980 x 1546。

风景模式在风景模式中，事情看起来更复杂。在我的测试中，我明确地将整个<html>标签的尺寸设置为100vw x 100vh，并将body的宽度和高度设置为100%。

但是，JavaScript将clientWidth和clientHeight报告为980 x 460，而Chrome开发工具将html和body元素的尺寸显示为980px x 556px，尽管这些元素都不会填充屏幕宽度或高度。

宽度设置为<main>并且其高度设置为200vh的100vh元素以横向模式填充屏幕的整个宽度，但在垂直方向上留下间隙，尽管Chrome报告它具有1112px x 556px的尺寸。

了解不同尺寸属性的测量结果也非常有用，这样我就可以理解它们应该如何使用。

编辑：

回复@Kaddath：不，我没有配置视口元标记。当我添加标签<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">时，尺寸会发生变化。特别是肖像模式中的``clienttWidth成为硬件像素中的屏幕宽度，除以devicePixelRatio，这非常有意义。 clientHeight似乎是CSS像素中屏幕的高度，减去应用栏和内置按钮栏的高度。