如何在iOS Safari中获得当前屏幕方向?

0pizxfdo  于 2023-01-27  发布在  iOS
关注(0)|答案(4)|浏览(352)

我正试图获得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.heightwindow.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上的屏幕方向?

mcdcgff0

mcdcgff01#

在safari调试器的dev控制台的intelisense中深入研究之后,我发现可以使用window.innerHeightwindow.innerWidth属性来检测屏幕方向。
以下是使用该函数的方法:

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

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

8gsdolmq2#

如果你想做一些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 :(");
}
mctunoxg

mctunoxg3#

尽管已弃用,但这在iOS 16 Safari(2022年末)上仍然有效:

// rotate right
window.orientation // -90

// rotate left
window.orientation // 90
n8ghc7c1

n8ghc7c14#

我目前(2023年初)使用这条小线,它返回方向的Angular ,我可以自己解释:
let orientation = (screen.orientation.angle || window.orientation);
0以外的值表示不是纵向,90表示反向纵向。

相关问题