useScreenOrientation

类别

Browser

导出大小

800 B

最近修改

2 days ago

响应式 屏幕方向 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

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:

import { useScreenOrientation } from '@vueuse/core'

const {
  isSupported,
  orientation,
  angle,
  lockOrientation,
  unlockOrientation,
} = useScreenOrientation()

lockOrientation('portrait-primary')

然后再次解锁，如下：

🌐 and then unlock again, with the following:

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