スポンサー
Support Framework7

デバイス

    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
    iosiOSデバイスの場合は true` です。
    androidtrue Android デバイス用
    androidChrometrue Android Chromeの場合
    desktopデスクトップブラウザ用 true です。
    iphonetrue(iPhone用
    ipod`iPod用
    ipad`iPadではtrue
    cordova`cordova環境で動作させるとtrueになります。
    capacitorキャパシター環境で動作している場合は true となります。
    phonegapcordova "プロップのエイリアス
    windowsWindowsデスクトップであれば true` です。
    macosmacOSデスクトップ用のtrue`です。
    ie`Internet Explorerブラウザではtrue
    edgeMS Edgeブラウザ用の true` です。
    firefox`FireFoxブラウザではtrue
    electron`Electron環境で動作している場合はtrueになります。
    nwjstrue アプリがNW.js環境で動作している場合
    webViewtrue アプリがウェブビューで動作している場合 - ウェブアプリがホーム画面にインストールされている場合、デスクトップPWAがデスクトップにインストールされている場合に有効です。
    standalonewebView`と同じです。
    osOSを含む ios, android, macos, windows のいずれかです。
    osVersion11.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