Screen Orientation

Reactive wrapper for the

ScreenOrientation API.

Usage

<script>
    import { screenOrientation } from "@sveu/browser"

    const { supported, orientation, angle, lock, unlock } = screenOrientation()
</script>
<script>
    import { screenOrientation } from "@sveu/browser"

    const { supported, orientation, angle, lock, unlock } = screenOrientation()
</script>
svelte

Example

For best results, please use a mobile or tablet device (or use your browser's native inspector to simulate an orientation change)

Supported: false

Orientation Type: unknown
Orientation Angle: 0
<script>
    import { screenOrientation } from "@sveu/browser"

    const { supported, orientation, angle } = screenOrientation()
</script>

<div class="flex flex-col space-y-5 mt-20 items-center">
    <p class="border border-4 shadow mb-2 p-3">
        For best results, please use a mobile or tablet device (or use your
        browser's native inspector to simulate an orientation change)
    </p>

    <p>Supported: {$supported}</p>

    <div>Orientation Type: <b>{$orientation}</b></div>

    <div>Orientation Angle: <b>{$angle}</b></div>
</div>
<script>
    import { screenOrientation } from "@sveu/browser"

    const { supported, orientation, angle } = screenOrientation()
</script>

<div class="flex flex-col space-y-5 mt-20 items-center">
    <p class="border border-4 shadow mb-2 p-3">
        For best results, please use a mobile or tablet device (or use your
        browser's native inspector to simulate an orientation change)
    </p>

    <p>Supported: {$supported}</p>

    <div>Orientation Type: <b>{$orientation}</b></div>

    <div>Orientation Angle: <b>{$angle}</b></div>
</div>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Click fold/expand code

API

Returns

Name Description Type
supported Whether the ScreenOrientation API is supported Readable<boolean>
orientation The current orientation of the device Readable<OrientationType>
angle The current angle of the device Readable<number>
lock Lock the orientation of the device (type: OrientationLockType) => void
unlock Unlock the orientation of the device () => void
Last update at: Invalid Date