了解移动设备上的方向、纵横比和 CSS 像素答案

【问题标题】：Understanding orientation, aspect ratio and CSS pixels on mobile devices了解移动设备上的方向、纵横比和 CSS 像素
【发布时间】：2019-07-29 02:42:58
【问题描述】：

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

我正在使用硬件像素尺寸为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，尽管这些元素都没有填满屏幕宽度或高度。

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

了解不同维度属性正在测量的具体内容也非常有帮助，这样我就可以了解应该如何使用它们。

编辑：

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

在纵向模式下，clientWidth 和 clientHeight 的值不太容易解释。

【问题讨论】：

“我的目标是让
元素在纵向和横向模式下完全填满可用的屏幕空间。”
- 以及 100 vw 和 vh 究竟如何还没有做到这一点？我不明白这里所有的“JS 衡量这个，JS 衡量那个……”是怎么回事，这与你所声明的目标有何关系。
你甚至还没有开始接触 iOS 尺寸！顺便问一下，你有没有配置任何视口元标记，如果有，它是如何设置的？

标签： javascript css mobile screen-orientation aspect-ratio

【解决方案1】：

为了更好地了解浏览器在不同情况下的工作方式，请尝试调用你的函数

setTimeout(showSize,300);

onresize 无法在所有浏览器上正确触发。

也可以试试 window.outerWidth 和 window.outerHeight。

解释很多，但你会学到的。

您也可以阅读https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

【讨论】：