Skip to content

useScreenOrientation

反应式 屏幕方向 API。它为网络开发者提供有关用户当前屏幕方向的信息。

¥Reactive Screen Orientation API. It provides web developers with information about the user's current screen orientation.

示例

For best results, please use a mobile or tablet device (or use your browser's native inspector to simulate an orientation change)
isSupported: false
Orientation Type:
Orientation Angle: 0

用法

¥Usage

ts
import { 
useScreenOrientation
} from '@vueuse/core'
const {
isSupported
,
orientation
,
angle
,
lockOrientation
,
unlockOrientation
,
} =
useScreenOrientation
()

要锁定方向,你可以将 OrientationLockType 传递给 lockOrientation 函数:

¥To lock the orientation, you can pass an OrientationLockType to the lockOrientation function:

ts
import { 
useScreenOrientation
} from '@vueuse/core'
const {
isSupported
,
orientation
,
angle
,
lockOrientation
,
unlockOrientation
,
} =
useScreenOrientation
()
lockOrientation
('portrait-primary')

然后再次解锁,如下:

¥and then unlock again, with the following:

ts
unlockOrientation
()

接受的方向类型为 "landscape-primary""landscape-secondary""portrait-primary""portrait-secondary""any""landscape""natural""portrait" 之一。

¥Accepted orientation types are one of "landscape-primary", "landscape-secondary", "portrait-primary", "portrait-secondary", "any", "landscape", "natural" and "portrait".

屏幕方向 API MDN

¥Screen Orientation API MDN

类型声明

显示类型声明
ts
export type 
OrientationType
=
| "portrait-primary" | "portrait-secondary" | "landscape-primary" | "landscape-secondary" export type
OrientationLockType
=
| "any" | "natural" | "landscape" | "portrait" | "portrait-primary" | "portrait-secondary" | "landscape-primary" | "landscape-secondary" export interface ScreenOrientation extends EventTarget {
lock
: (
orientation
:
OrientationLockType
) =>
Promise
<void>
unlock
: () => void
readonly
type
:
OrientationType
readonly
angle
: number
addEventListener
: (
type
: "change",
listener
: (
this
: this,
ev
: Event) => any,
useCapture
?: boolean,
) => void } /** * Reactive screen orientation * * @see https://vueuse.org/useScreenOrientation */ export declare function
useScreenOrientation
(
options
?:
ConfigurableWindow
): {
isSupported
:
ComputedRef
<boolean>
orientation
:
Ref
<
OrientationType
| undefined,
OrientationType
| undefined>
angle
:
ShallowRef
<number, number>
lockOrientation
: (
type
:
OrientationLockType
) =>
Promise
<void>
unlockOrientation
: () => void
} export type
UseScreenOrientationReturn
=
ReturnType
<typeof
useScreenOrientation
>

源代码

源代码示例文档

变更日志

d32f8 - refactor: add @__NO_SIDE_EFFECTS__ annotations to all pure functions (#4907)