スポンサースポンサーになる

デバイス

Framework7 には、デバイスとプラットフォームに関する有用な情報を含むデバイス検出ライブラリが付属しています。

Framework7 クラスの `device` プロパティ (`Framework7.device`) と、初期化されたアプリインスタンスの同じプロパティ (`app.device`) として利用できます。

// If we need it in place where we don't have access to app instance or before we init the app
if (Framework7.device.ios) {
  console.log('It is iOS device');
}


// After we init the app we can access it as app instance property
var app = new Framework7({ /*...*/ });
if (app.device.android) {
  console.log('It is android device');
}

getDevice

サーバーサイド環境または ES モジュールで Framework7 を使用する場合、代わりに `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');
}

メソッドとプロパティ

プロパティ
iosiOS デバイスの場合は `true` です。
androidAndroid デバイスの場合は `true` です。
androidChromeAndroid Chrome の場合は `true` です。
desktopデスクトップブラウザの場合は `true` です。
iphoneiPhone の場合は `true` です。
ipodiPod の場合は `true` です。
ipadiPad の場合は `true` です。
cordovaアプリが Cordova 環境で実行されている場合は `true` です。
capacitorアプリが Capacitor 環境で実行されている場合は `true` です。
windowsデスクトップ Windows の場合は `true` です。
macosデスクトップ macOS の場合は `true` です。
ieInternet Explorer ブラウザの場合は `true` です。
edgeMS Edge ブラウザの場合は `true` です。
firefoxFireFox ブラウザの場合は `true` です。
electronアプリが Electron 環境で実行されている場合は `true` です。
nwjsアプリが NW.js 環境で実行されている場合は `true` です。
webViewアプリが Web ビューで実行されている場合に `true` です。 - ホーム画面にインストールされた Web アプリ、デスクトップにインストールされたデスクトップ PWA に有効です。
standalone`webView` と同じです。
osOS を含みます。 `ios`、`android`、`macos`、`windows` のいずれかです。
osVersionOS バージョンを含みます。例: `11.2.0`
pixelRatioデバイスピクセル比
メソッド
prefersColorScheme()ユーザーシステムの優先カラースキームを返します。この機能がサポートされている場合は `light` または `dark` を返し、それ以外の場合は `undefined` を返します。この機能のサポートは、`(prefers-color-scheme)` メディアクエリのサポートに基づいています。

デバイス検出ライブラリは、`<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
このドキュメントを改善する
このページの内容