赞助人成为赞助人

设备

Framework7 附带设备检测库，其中包含有关设备和平台的有用信息。

它可作为 Framework7 类的“`deivce`”属性 (`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`，前提是我们知道基于请求的 `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如果应用程序在 Web 视图中运行，则为 `true`，即安装到主屏幕的 Web 应用程序，适用于安装到桌面的桌面 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
改进此档
在此页面上