useScreenOrientation

カテゴリ

ブラウザ

エクスポートサイズ

704 バイト

最終変更日

先週

リアクティブな画面方向API です。Web 開発者にユーザーの現在の画面方向に関する情報を提供します。

デモ

ソース

最良の結果を得るには、モバイルデバイスまたはタブレットデバイスを使用してください（または、ブラウザのネイティブインスペクターを使用して方向の変更をシミュレートしてください）

サポートされているかどうか: false

方向タイプ:

方向角度: 0

使用方法

import { useScreenOrientation } from '@vueuse/core'

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

方向をロックするには、OrientationLockType を lockOrientation 関数に渡します

import { useScreenOrientation } from '@vueuse/core'

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

lockOrientation('portrait-primary')

そして、以下のように再びロックを解除します

unlockOrientation()

許可される方向タイプは、"landscape-primary"、"landscape-secondary"、"portrait-primary"、"portrait-secondary"、"any"、"landscape"、"natural"、"portrait" のいずれかです。

画面方向 API MDN

型宣言

型宣言を表示

typescript

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.dokyumento.jp/useScreenOrientation
 */
export declare function useScreenOrientation(options?: ConfigurableWindow): {
  isSupported: ComputedRef<boolean>
  orientation: Ref<OrientationType | undefined, OrientationType | undefined>
  angle: Ref<number, number>
  lockOrientation: (type: OrientationLockType) => Promise<void>
  unlockOrientation: () => void
}
export type UseScreenOrientationReturn = ReturnType<typeof useScreenOrientation>