device.js

? device.js

필수 브라우저 및 장치 속성을 관찰하는 반응 라이브러리.

켈 버전 2는 버전 1과 호환되지 않습니다. 자세한 내용은 ChangEleg를 확인하십시오.

✔️ 기능이 감지되었습니다

• 브라우저 이름 및 버전 chrome, safari, firefox, facebook, instagram, edge, ie, opera, phantomjs
• 브라우저에는 webp, webrtc, webgl, pwa 있습니다
• 장치 방향 portrait, landscape
• 장치 유형 desktop, mobile, tablet, tv
• 장치 OS android, ios, windows, macos
• 뷰포트 치수 width, height

? 설치

yarn add @maoosi/device.js

용법

기본 사용 :

이 코드는 모든 뷰포트 크기 조정 후 200ms로 조절 한 후 viewportWidth 기록합니다.

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

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

device 는 반응성 프록시 된 객체로 관찰 될 수 있고 다음 속성을 노출시킵니다.

 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
}

vue.js 사용 :

device 반응성 프록시 객체이므로 vue.js는 watch 방법을 사용할 필요없이 변경 사항을 관찰 할 수 있습니다.

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

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

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

? 놀이터를 달리십시오

먼저 vue.js 인스턴트 프로토 타이핑 서비스가 설치되어 있는지 확인하십시오 : https://cli.vuejs.org/guide/prototyping.html

그런 다음 터미널에서 :

yarn playground

? 기여

기부금, 문제 및 기능 요청을 환영합니다.

특허

저작권 © 2021 Maoosi.

이 프로젝트는 MIT 라이센스가 부여되었습니다.