Useragent

Wrapper around the

User-Agent Client Hints API.

Usage

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

    const {
        supported,
        mobile,
        arch,
        model,
        platform,
        platformVersion,
        bitness,
        brands
    } = useragent()
</script>
<script>
    import {useragent} from "@sveu/browser"

    const {
        supported,
        mobile,
        arch,
        model,
        platform,
        platformVersion,
        bitness,
        brands
    } = useragent()
</script>
svelte

Example

Supported: false

Is mobile: false

Architecture:

Model:

Platform:

Platform version:

Bitness:

Brands: [{"name":"","version":""}]

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

    const {
        supported,
        mobile,
        arch,
        model,
        platform,
        platformVersion,
        bitness,
        brands
    } = useragent()
</script>

<div class="text-center">
    <h1>Supported: <small>{$supported}</small></h1>

    <h1>Is mobile: <small>{$mobile}</small></h1>

    <h1>Architecture: <small>{$arch}</small></h1>

    <h1>Model: <small>{$model}</small></h1>

    <h1>Platform: <small>{$platform}</small></h1>

    <h1>Platform version: <small>{$platformVersion}</small></h1>

    <h1>Bitness: <small>{$bitness}</small></h1>

    <h1>Brands: <small>{JSON.stringify($brands)}</small></h1>
</div>
<script>
import { useragent } from "@sveu/browser"

    const {
        supported,
        mobile,
        arch,
        model,
        platform,
        platformVersion,
        bitness,
        brands
    } = useragent()
</script>

<div class="text-center">
    <h1>Supported: <small>{$supported}</small></h1>

    <h1>Is mobile: <small>{$mobile}</small></h1>

    <h1>Architecture: <small>{$arch}</small></h1>

    <h1>Model: <small>{$model}</small></h1>

    <h1>Platform: <small>{$platform}</small></h1>

    <h1>Platform version: <small>{$platformVersion}</small></h1>

    <h1>Bitness: <small>{$bitness}</small></h1>

    <h1>Brands: <small>{JSON.stringify($brands)}</small></h1>
</div>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Click fold/expand code

API

Returns

Name Description Type
supported Whether the browser supports the User-Agent Client Hints api. Readable<boolean>
mobile Whether the device is a mobile device. Readable<boolean>
arch The architecture of the device. Readable<string>
model The model of the device. Readable<string>
platform The platform of the device. Readable<string>
platformVersion The platform version of the device. Readable<string>
bitness The bitness of the device. Readable<string>
brands The brands of the device. Readable<UserAgentDataBrand[]>