useScreenOrientation
Reactive Screen Orientation API. It provides web developers with information about the user's current screen orientation.
Demo
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()
import { useScreenOrientation } from '@vueuse/core'
const {
isSupported,
orientation,
angle,
lockOrientation,
unlockOrientation,
} = useScreenOrientation()
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('primary-portrait')
import { useScreenOrientation } from '@vueuse/core'
const {
isSupported,
orientation,
angle,
lockOrientation,
unlockOrientation,
} = useScreenOrientation()
lockOrientation('primary-portrait')
and then unlock again, with the following:
unlockOrientation()
unlockOrientation()
Accepted orientation types are one of "landscape-primary", "landscape-secondary", "portrait-primary", "portrait-secondary", "any", "landscape", "natural" and "portrait".
Type Declarations
/**
*
* Reactive screen orientation
*
* @see https://vueuse.org/useScreenOrientation
*/
export declare const useScreenOrientation: (options?: ConfigurableWindow) => {
isSupported: boolean
orientation: Ref<OrientationType | undefined>
angle: Ref<number>
lockOrientation: (type: OrientationLockType) => Promise<void>
unlockOrientation: () => void
}
export declare type UseScreenOrientationReturn = ReturnType<
typeof useScreenOrientation
>
/**
*
* Reactive screen orientation
*
* @see https://vueuse.org/useScreenOrientation
*/
export declare const useScreenOrientation: (options?: ConfigurableWindow) => {
isSupported: boolean
orientation: Ref<OrientationType | undefined>
angle: Ref<number>
lockOrientation: (type: OrientationLockType) => Promise<void>
unlockOrientation: () => void
}
export declare type UseScreenOrientationReturn = ReturnType<
typeof useScreenOrientation
>
Source
Contributors
Michael J. Roberts
Nicolas Hedger