device.js

? Gerät.js

Reaktive Bibliothek, um den essentiellen Browser- und Geräteeigenschaften zu beobachten.

Euen Version 2 ist nicht rückwärtskompatibel mit Version 1. Überprüfen Sie den Changelog für weitere Details.

✔️ Funktionen erkannt

• Browsername & Version chrome, safari, firefox, facebook, instagram, edge, ie, opera, phantomjs
• Browser bietet webp, webrtc, webgl, pwa
• Geräte -Orientierungsporträt portrait, landscape
• Gerätetyp desktop, mobile, tablet, tv
• Gerät OS android, ios, windows, macos
• Ansichtsfenster -Abmessungen width, height

? Installation

yarn add @maoosi/device.js

Verwendung

Grundnutzung:

Dieser Code protokolliert viewportWidth nach jeder Änderung der Ansichtsfenster, die auf 200 ms gedrosselt wird:

 import { device , watch } from '@maoosi/device.js'

watch ( async ( ) => {
    console . log ( device . viewportWidth )
} )

device ist ein reaktives proxiziertes Objekt, das beobachtet werden kann und die folgenden Eigenschaften enthüllt:

 interface device {
    deviceOS : string | null
    deviceType : string | null
    deviceOrientation : string | null
    browser : string | null
    browserVersion : string | null
    viewportHeight : number | null
    viewportWidth : number | null
    isBrowserEvergreen : boolean | null
    isPWA : boolean | null
    isSupportedWebP : boolean | null
    isSupportedWebGL : boolean | null
    isSupportedWebRTC : boolean | null
}

Verwenden von Vue.js:

Da device ein reaktives proxiedes Objekt ist, kann Vue.js Änderungen beobachten, ohne die watch zu verwenden:

 < template >
    < pre > {{ deviceInfo }} </ pre >
</ template >

< script >
import { device } from '@maoosi/device.js'

export default {
    data ( ) {
        return { deviceInfo : device }
    }
}
</ script > 

? Laufen Sie den Spielplatz

Stellen Sie zunächst sicher, dass Sie Vue.js Instant Prototyping -Dienst installiert haben: https://cli.vuejs.org/guide/prototyping.html

Dann aus Ihrem Terminal:

yarn playground

? Beitragen

Beiträge, Probleme und Feature -Anfragen sind willkommen.

Lizenz

Copyright © 2021 Maosisi.

Dieses Projekt ist MIT lizenziert.