javascript - 为什么在水平方向时 window.innerHeight 返回 180 ？

Question

iPhone 5s 的视口(viewport)为 320x568。当处于垂直方向时，window.innerHeight 返回 460，等于 screen.height - 镶边。但是，当处于水平方向时，window.innerHeight 返回 180。没有镶边。在我看来，它应该返回 320。

这是视口(viewport)宽度设置为 320 的情况。

<meta name="viewport" content="width=320">

水平(横向)方向的window.innerHeight尺寸是如何得出的？

Answer 1

移动 Safari 上视口(viewport)的高度由视口(viewport)中定义的宽度决定，除以屏幕宽度(以点为单位，而不是像素)乘以屏幕高度(同样，以点为单位，而不是像素)减去菜单栏的大小。在 iPhone 上，它的工作方式如下:

320/480 * 320 - 40，横向约为 180 像素(其中点的宽度为 480，高度为 320)。这是报告的高度，因为它是您的视口(viewport)的高度(以像素为单位，而不是点)。

我这样做的原因(320/480)是为了获得一个值，该值告诉我定义的视口(viewport)比实际屏幕宽度小了多少。然后我们可以使用它来将高度(我们知道以点为单位)减少相同的量，从而得到高度与纵横比，我们可以从中减去 iPhone UI 元素的大小。我不确定 40 是多少，但它在这个范围内。

简而言之

一般规则如下:

(viewport.width/screen.width) * screen.height

因此，在纵向模式下，假设您的 iPhone 的屏幕尺寸为 320x568点，则意味着 320/320 * 568 或 1 * 568，因此高度报告为 568。横向显示为 (320/568) * 320 或 0.56338028169014 * 320 或 180.2816901408448。