我正试图获得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上的屏幕方向?
4条答案
按热度按时间mcdcgff01#
在safari调试器的dev控制台的intelisense中深入研究之后,我发现可以使用
window.innerHeight
和window.innerWidth
属性来检测屏幕方向。以下是使用该函数的方法:
8gsdolmq2#
如果你想做一些CSS,你可以使用媒体查询。
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation
基本上可以使用
@media (orientation: landscape) {}
如果你想在JS中使用它,为了其他目的,你可以用途:
mctunoxg3#
尽管已弃用,但这在iOS 16 Safari(2022年末)上仍然有效:
n8ghc7c14#
我目前(2023年初)使用这条小线,它返回方向的Angular ,我可以自己解释:
let orientation = (screen.orientation.angle || window.orientation);
0以外的值表示不是纵向,90表示反向纵向。