useScreenOrientation

リアクティブなスクリーンオリエンテーションAPI。これは、ユーザーの現在の画面の向きに関する情報をウェブ開発者に提供します。

使用法

import { useScreenOrientation } from '@vueuse/core'

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

向きをロックするには、lockOrientation 関数に OrientationLockType を渡すことができます。

import { useScreenOrientation } from '@vueuse/core'

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

lockOrientation('portrait-primary')

そして、次のようにして再度ロックを解除します。

import { useScreenOrientation } from '@vueuse/core'

const { unlockOrientation } = useScreenOrientation()
// ---cut---
unlockOrientation()

受け入れられる向きのタイプは、"landscape-primary", "landscape-secondary", "portrait-primary", "portrait-secondary", "any", "landscape", "natural", "portrait" のいずれかです。

スクリーンオリエンテーションAPI MDN