javascript - 识别移动设备的纵向或横向模式和缩放级别(但不特定于浏览器)

Question

我知道识别纵向或横向节点的答案之一是 -

window.innerWidth > window.innerHeight

但是在chrome 60th之后，innerWidth和innerHeight的定义发生了变化，现在它代表布局视口(viewport)。因此，一旦打开键盘，虽然设备处于纵向模式，但 window.innerHeight 变得比 window.innerWidth 小，并表示它是横向模式。

另外请注意以下事项-

1. 不想对浏览器进行特定检查。
2. 当方向改变时，一些设备也会在之前触发调整大小事件实际上改变了方向值。所以，在那种情况下调整大小回调，设备的方向实际上是横向的，但是方向值会将其报告为纵向。
3. window.screen.orientation 也不兼容不同的浏览器。

Answer 1

您可能想要使用 screen.width 和 screen.height，因为它们不考虑键盘是否可见，它只是返回视口(viewport)尺寸。

let screenOrientation = () => {
  return screen.width > screen.height ? "landscape" : "portrait";
}