了解移动设备上的方向，长宽比和CSS像素
Jam*_*ton 5 javascript css mobile aspect-ratio screen-orientation
对于我当前的项目，我需要在横向模式下为移动设备优化页面布局。您可以帮助我了解测量浏览器窗口大小的不同方法吗？
我正在使用具有像素硬件像素尺寸的Android智能手机720 x 1280。
纵向模式
在纵向模式下，当我使用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>标签的CSS尺寸设置为100vwx 100vh，将bodywidth和height设置为100%。
但是，JavaScript报告的clientWidth和clientHeight为980 x 460，而Chrome开发工具将html和body元素的尺寸显示为980px x 556px，尽管这两个元素均不能填充屏幕的宽度或高度。
甲<main>元件，其宽度被设定为200vh，其高度设定为100vh填充在横向模式下的屏幕的整个宽度，但叶片在垂直方向上的间隙，尽管铬报告它具有的尺寸的事实1112px x 556px。
了解不同尺寸属性到底要测量什么也非常有帮助，这样我就可以理解应如何使用它们。
编辑：
回复@Kaddath：不，我没有配置视口元标记。添加标签后<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">，尺寸会发生变化。特别是clienttWidth在纵向模式下的`` 变为以硬件像素为单位的屏幕宽度除以devicePixelRatio，这很有意义。在clientHeight似乎是在CSS像素屏幕的高度，减去应用栏的高度和内置按钮栏。
在人像模式中，对于价值clientWidth和clientHeight不那么容易解释。
小智 0
为了更好地理解浏览器在不同情况下如何工作，请尝试使用以下命令调用您的函数
setTimeout(showSize,300);
onresize 无法在所有浏览器上正确触发。
还可以尝试 window.outerWidth 和 window.outerHeight。
有很多需要解释的地方，但你会学到的。
您还可以阅读https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
| 归档时间： |
|
| 查看次数： |
356 次 |
| 最近记录： |