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许可。