device.js

? Device.js

Bibliothèque réactive pour observer les propriétés essentielles du navigateur et de l'appareil.

️ La version 2 n'est pas en arrière compatible avec la version 1. Vérifiez le Changelog pour plus de détails.

✔️ Caractéristiques détectées

• Nom et version du navigateur chrome, safari, firefox, facebook, instagram, edge, ie, opera, phantomjs
• BROWSER CARFÉTS webp, webrtc, webgl, pwa
• portrait, landscape
• Type d'appareil desktop, mobile, tablet, tv
• Appareil OS android, ios, windows, macos
• Dimensions de la fenêtre width, height

? Installation

yarn add @maoosi/device.js

Usage

Utilisation de base:

Ce code enregistrera viewportWidth après chaque redimensionnement de la fenêtre, étranglé à 200 ms:

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

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

device est un objet proxé réactif qui peut être observé et expose les propriétés suivantes:

 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
}

Utilisation de Vue.js:

Étant donné que device est un objet proxé réactif, Vue.js peut observer les modifications sans avoir besoin d'utiliser la méthode watch :

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

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

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

? Exécutez le terrain de jeu

Tout d'abord, assurez-vous que le service de prototypage instantané Vue.js est installé: https://cli.vuejs.org/guide/prototyping.html

Puis à partir de votre terminal:

yarn playground

? Contributif

Les contributions, les problèmes et les demandes de fonctionnalités sont les bienvenus.

Licence

Copyright © 2021 Maoosi.

Ce projet est sous licence MIT.