Question

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

我正在使用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。

风景模式 在横向模式下，情况似乎更加复杂。在我的测试中，我明确地将CSS的整个<html>标签的尺寸设置为100vw x 100vh，并将body的宽度和高度设置为100%。 / p>

但是，JavaScript将clientWidth和clientHeight报告为980 x 460，而Chrome开发工具将{{1}}和html元素的尺寸显示为{{ 1}}，尽管这些元素都不占满屏幕的宽度或高度。

宽度为body且高度为980px x 556px的{{1}}元素在横向模式下填充屏幕的整个宽度，但在垂直方向上留有间隙，尽管Chrome报告其尺寸为<main>。

了解不同尺寸属性到底要测量什么也非常有帮助，这样我就可以理解应如何使用它们。

编辑：

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

在纵向模式下，clienttWidth和devicePixelRatio的值很难解释。

Answer 1

为了更好地了解浏览器如何在不同情况下工作，请尝试使用调用您的函数

setTimeout（showSize，300）;

onresize不能在所有浏览器上正确触发。

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

要解释的东西很多，但您会学到的。

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

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

1 个答案: