デバイス

getDevice.
メソッドとプロパティ
デバイス関連クラス

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

← 便利な関数

サポート →

デバイス

getDevice.

メソッドとプロパティ

デバイス関連クラス

`getDevice`.