Device
- Methods & Properties
- Device Related Classes

Device

Framework7 comes with Device detection library with which contains useful information about device and platform.

It is available as a device property of Framework7 class (Framework7.device) and same property on initialized app instance (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');
}

Methods & Properties

Properties
ios	`true` for iOS device
android	`true` for Android device
desktop	`true` for desktop browser
iphone	`true` for iPhone
ipod	`true` for iPod
ipad	`true` for iPad
cordova	`true` when app running in cordova environment
phonegap	alias for `cordova` prop
windows	`true` for desktop windows
macos	`true` for desktop macOs
ie	`true` for Internet Explorer browser
edge	`true` for Edge browser
electron	`true` when app is running under Electron environment
nwjs	`true` when app is running under NW.js environment
webView	`true` if app runs in web view - webapp installed to home screen, valid for desktop PWAs installed to desktop
standalone	Same as `webView`
os	Contains OS can be `ios`, `android`, `macos`, `windows`
osVersion	Contains OS version, e.g. `11.2.0`
pixelRatio	Device pixel ratio
Methods
prefersColorScheme()	Returns preferred user system color scheme. Returns `“light”` or `“dark”` where this feature supported or `undefined` otherwise. This feature support is based on `(prefers-color-scheme)` media query support.

Device Related Classes

Device detecting library adds additional classes on <html> element which can help you with different CSS styles for different OS and platforms.

In other words classes calculated by the following rule:

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

← Utils

Support →