device.js

？ device.js

反應性庫觀察必需的瀏覽器和設備屬性。

配x版本2與版本1不向後兼容。查看ChangElog以獲取更多詳細信息。

檢測到的特徵

• 瀏覽器名稱和版本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

用法

基本用法：

此代碼將在每個視口大大調整大小後記錄viewportWidth ，節點為200 ms：

 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.s.org/guide/prototyping.html

然後從您的航站樓：

yarn playground

？貢獻

歡迎貢獻，問題和功能請求。

執照

版權所有©2021 MAOOSI。

該項目已獲得MIT許可。