对于我当前的元素，我需要针对移动设备优化横向模式下的页面布局。你能帮我理解测量浏览器窗口大小的不同方法吗？
我正在使用硬件像素尺寸为 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 .
横向模式
在横向模式下，事情似乎更加复杂。在我的测试中，我显式地通过 CSS 设置了整个 <html> 的尺寸。标记为 100vw x 100vh , 和 body宽度和高度为 100% .
但是，JavaScript 报告 clientWidth和 clientHeight作为980 x 460 , 而 Chrome 开发工具显示 html 的尺寸和 body元素为 980px x 556px , 尽管这些元素都没有填充屏幕宽度或高度。
A <main>宽度设置为 200vh 的元素并且其高度设置为 100vh在横向模式下填满屏幕的整个宽度，但在垂直方向上留有间隙，尽管 Chrome 报告它的尺寸为 1112px x 556px。 .
了解不同的维度属性究竟测量的是什么也非常有帮助，这样我就可以理解应该如何使用它们。
编辑:
回复@Kaddath:不，我没有配置视口(viewport)元标记。当我添加标签时 <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> ，尺寸发生变化。特别是`` clienttWidth在纵向模式下变为以硬件像素为单位的屏幕宽度除以 devicePixelRatio , 这很有道理。 clientHeight显示为以 CSS 像素为单位的屏幕高度减去应用栏和内置按钮栏的高度。
在纵向模式下，clientWidth 的值和 clientHeight不是那么容易解释的。
最佳答案
为了更好地理解浏览器在不同情况下的工作方式，请尝试调用您的函数
setTimeout(showSize,300);
onresize 不能在所有浏览器上正确触发。
也可以试试 window.outerWidth 和 window.outerHeight。
需要解释的内容很多，但您会学到的。
您还可以阅读 https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
关于javascript - 了解移动设备上的方向、纵横比和 CSS 像素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55039955/