device.js

? Device.js

Biblioteca reativa para observar as propriedades essenciais do navegador e do dispositivo.

️ A versão 2 não é compatível com a versão 1. Verifique o Changelog para obter mais detalhes.

✔️ Recursos detectados

• Nome do navegador e versão chrome, safari, firefox, facebook, instagram, edge, ie, opera, phantomjs
• O navegador apresenta webp, webrtc, webgl, pwa
• portrait, landscape
• desktop, mobile, tablet, tv
• Dispositivo OS android, ios, windows, macos
• Dimensões da viewport width, height

? Instalação

yarn add @maoosi/device.js

Uso

Uso básico:

Este código registrará viewportWidth após cada redimensionamento de viewport, acelerado para 200 ms:

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

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

device é um objeto proxado reativo que pode ser observado e expõe as seguintes propriedades:

 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
}

Usando o vue.js:

Como device é um objeto proxado reativo, o vue.js pode observar alterações sem precisar usar o método watch :

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

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

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

? Execute o playground

Primeiro, certifique -se de ter um serviço de prototipagem instantâneo vue.js instalado: https://cli.vuejs.org/guide/prototyping.html

Então do seu terminal:

yarn playground

? Contribuindo

Contribuições, questões e solicitações de recursos são bem -vindos.

Licença

Copyright © 2021 Maoosi.

Este projeto está licenciado pelo MIT.