device.js

？ device.js

必須ブラウザとデバイスのプロパティを観察するためのリアクティブライブラリ。

ショ和バージョン2は、バージョン1との後方互換性がありません。詳細については、Changelogを確認してください。

dectixedytextectedが検出されました

• ブラウザ名とバージョンの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ミリ秒にスロットしました。

 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

？貢献

貢献、問題、機能のリクエストは大歓迎です。

ライセンス

Copyright©2021 Maoosi。

このプロジェクトはMITライセンスです。