デバイス
Framework7には、デバイスとプラットフォームに関する有用な情報を含むデバイス検出ライブラリが付属しています。
これは、Framework7クラスのdevice
プロパティとして利用可能で、初期化されたアプリのインスタンスでも同じプロパティが利用できます(app.device
)。
// アプリのインスタンスにアクセスできない場所や、アプリを初期化する前に必要な場合は
if (Framework7.device.ios) {
console.log('It is iOS device');
}
// アプリを初期化した後は、アプリのインスタンスのプロパティとしてアクセスできます。
var app = new Framework7({ /*...*/ });
if (app.device.android) {
console.log('It is android device');
}
getDevice
.
Framework7をサーバーサイド環境やESモジュールで使用する場合は、代わりにgetDevice
ユーティリティを使用する必要があります。
import { getDevice } from 'framework7';
const device = getDevice();
if (device.android) {
console.log('It is android device');
}
サーバーサイドで使用する場合、リクエストに基づいて分かっている場合は、userAgent
を渡すこともできます。
import { getDevice } from 'framework7';
const device = getDevice({ userAgent: 'SOME_USER_AGENT' });
if (device.android) {
console.log('It is android device');
}
メソッドとプロパティ
Properties | |
---|---|
ios | iOSデバイスの場合は true` です。 |
android | true Android デバイス用 |
androidChrome | true Android Chromeの場合 |
desktop | デスクトップブラウザ用 true です。 |
iphone | true (iPhone用 |
ipod | `iPod用 |
ipad | `iPadではtrue |
cordova | `cordova環境で動作させるとtrueになります。 |
capacitor | キャパシター環境で動作している場合は true となります。 |
phonegap | cordova "プロップのエイリアス |
windows | Windowsデスクトップであれば true` です。 |
macos | macOSデスクトップ用の true`です。 |
ie | `Internet Explorerブラウザではtrue |
edge | MS Edgeブラウザ用の true` です。 |
firefox | `FireFoxブラウザではtrue |
electron | `Electron環境で動作している場合はtrueになります。 |
nwjs | true アプリがNW.js環境で動作している場合 |
webView | true アプリがウェブビューで動作している場合 - ウェブアプリがホーム画面にインストールされている場合、デスクトップPWAがデスクトップにインストールされている場合に有効です。 |
standalone | webView`と同じです。 |
os | OSを含む ios , android , macos , windows のいずれかです。 |
osVersion | 11.2.0`のようにOSのバージョンを含む |
pixelRatio | デバイスのピクセル比 |
Methods | |
prefersColorScheme() | 好みのユーザーシステムの配色を返します。この機能がサポートされている場合は "light" または "dark" を、そうでない場合は undefined を返します。この機能のサポートは、(prefers-color-scheme) media query supportに基づいています。 |
デバイス関連クラス
デバイス検出ライブラリは、<html>
要素に追加のクラスを追加します。これは、OSやプラットフォームごとに異なるCSSスタイルを提供するのに役立ちます。
つまり、以下のルールで計算されたクラスです。
device-[os]
device-desktop
device-macos - if desktop macOS device
device-windows - if desktop windows device
device-pixel-ratio-[pixel ratio]
device-cordova - if app running under cordova