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

0pizxfdo 于 2023-01-27 发布在 iOS

关注(0)|答案(4)|浏览(353)

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

ios

来源：https://stackoverflow.com/questions/66836579/how-to-get-current-screen-orientation-in-ios-safari

4条答案

按热度按时间

mcdcgff01#

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

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

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

赞(0）回复(0）举报 2023-01-27

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 :(");
}

赞(0）回复(0）举报 2023-01-27

mctunoxg3#

尽管已弃用，但这在iOS 16 Safari（2022年末）上仍然有效：

// rotate right
window.orientation // -90

// rotate left
window.orientation // 90

赞(0）回复(0）举报 2023-01-27

n8ghc7c14#

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

赞(0）回复(0）举报 2023-01-27

我来回答

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

4条答案

相关问题

热门标签

最新问答