识别移动设备的纵向或横向模式以及缩放级别（但不特定于浏览器）

Question

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

window.innerWidth > window.innerHeight

但是在chrome第60版之后，innerWidth和innerHeight的定义发生了变化，现在它代表布局视口。 因此，一旦打开键盘，尽管设备处于纵向模式，但 window.innerHeight 会变得小于 window.innerWidth，并且它表示它是横向模式。

另请注意以下事项 -

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

Answer 1

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

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

Answer 2

您可以使用

outerWidth

而不是

innerWidth

来防止任何视口问题

if (window.outerWidth > window.outerHeight) {
    //Landscape
}

Answer 3

自 2023 年 3 月以来， screen.orientation 适用于最新的设备和浏览器版本。

switch (screen.orientation.type) {
  case "landscape-primary":
    console.log("That looks good.");
    break;
  case "landscape-secondary":
    console.log("Mmmh… the screen is upside down!");
    break;
  case "portrait-secondary":
  case "portrait-primary":
    console.log("Mmmh… you should rotate your device to landscape");
    break;
  default:
    console.log("The orientation API isn't supported in this browser :(");
}

• 查看完全兼容性