如何在 iOS Safari 中获取当前屏幕方向？

Question

我正在尝试获取 iOS 的当前屏幕方向，但是我的功能在 chrome 开发工具模拟器和桌面上工作，但在 iOS 上不起作用。

这是我的函数：

export type ScreenOrientation = "landscape" | "portrait";

export function getScreenOrientation(): ScreenOrientation
{
  if (window.screen.availHeight > window.screen.availWidth)
    return "portrait";
  else
    return "landscape";
}

下面是我的程序大致如何检测屏幕方向变化并使用函数：

  import { getScreenOrientation } from "../../Utils/getOrientation";
  const shoWPortraitModeError = getScreenOrientation() == "landscape" ? false : true;
  window.onorientationchange = function () {
    const newState = getScreenOrientation() == "landscape" ? false : true;
    console.log("window.onorientationchange: ", newState)
    shoWPortraitModeError  = newState;
  };

我尝试使用 window.screen.height 和 window.screen.width，但没有成功。这是函数：

export type ScreenOrientation = "landscape" | "portrait";

export function getScreenOrientation(): ScreenOrientation
{
  if (window.screen.availHeight > window.screen.availWidth)
    return "portrait";
  else
    return "landscape";
}

我在 mac 虚拟机上启动了 iOS Safari 调试器，我注意到当我转动屏幕时 window.screen 值没有改变：

这让我想知道有什么不同属性我可以用来检测 ios 上的屏幕方向？

Answer 1

在 safari 调试器的开发控制台的智能感知中深入研究后，我发现您可以使用 window.innerHeight 和 window.innerWidth 属性来检测屏幕方向。

以下是如何使用该功能：

export type ScreenOrientation = "landscape" | "portrait";

export function getScreenOrientation(): ScreenOrientation
{
  if (window.innerHeight > window.innerWidth)
    return "portrait";
  else
    return "landscape";
}

Answer 2

如果你想做一些CSS，你可以使用媒体查询。

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation

基本上可以用@media (orientation: landscape) {}

如果你想在JS中使用，用于其他目的，你可以使用：

let orientation = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation;

if (orientation === "landscape-primary") {
  console.log("That looks good.");
} else if (orientation === "landscape-secondary") {
  console.log("Mmmh... the screen is upside down!");
} else if (orientation === "portrait-secondary" || orientation === "portrait-primary") {
  console.log("Mmmh... you should rotate your device to landscape");
} else if (orientation === undefined) {
  console.log("The orientation API isn't supported in this browser :(");
}

Answer 3

尽管已弃用，但它适用于当前的 iOS Safari：

// rotate right
window.orientation // -90

// rotate left
window.orientation // -90

如何在 iOS Safari 中获取当前屏幕方向？

How to get current screen orientation in iOS Safari?

javascript

mobile-safari

ios

typescript