贊助商成為贊助商

裝置

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');
}

方法和屬性

屬性
ios對於 iOS 裝置為 true
android對於 Android 裝置為 true
androidChrome對於 Android Chrome 為 true
desktop對於桌面瀏覽器為 true
iphone對於 iPhone 為 true
ipod對於 iPod 為 true
ipad對於 iPad 為 true
cordova當應用程式在 cordova 環境中執行時為 true
capacitor當應用程式在 capacitor 環境中執行時為 true
windows對於桌面 Windows 為 true
macos對於桌面 macOS 為 true
ie對於 Internet Explorer 瀏覽器為 true
edge對於 MS Edge 瀏覽器為 true
firefox對於 FireFox 瀏覽器為 true
electron當應用程式在 Electron 環境下執行時為 true
nwjs當應用程式在 NW.js 環境下執行時為 true
webView如果應用程式在網路檢視中執行，則為 true - 安裝到主畫面的網路應用程式，適用於安裝到桌面的桌面 PWA
standalone與 webView 相同
os包含作業系統，可以是 ios、android、macos、windows
osVersion包含作業系統版本，例如 11.2.0
pixelRatio裝置像素比
方法
prefersColorScheme()傳回使用者偏好的系統配色方案。如果此功能受支援，則傳回 "light" 或 "dark"，否則傳回 undefined。此功能支援基於 (prefers-color-scheme) 媒體查詢支援。

裝置偵測函式庫會在 <html> 元素上新增額外類別，這些類別可協助您針對不同的作業系統和平台採用不同的 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
改善此文件
在此頁面