Device

getDevice
Methods & Properties
Device Related Classes

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

`getDevice`

When we use Framework7 on server-side environments or with ES modules, we need to use getDevice util instead:

import { getDevice } from 'framework7';

const device = getDevice();

if (device.android) {
  console.log('It is android device');
}

If we use it on server-side, we can also pass userAgent for the case if we know it based on the request:

import { getDevice } from 'framework7';

const device = getDevice({ userAgent: 'SOME_USER_AGENT' });

if (device.android) {
  console.log('It is android device');
}

Methods & Properties

Properties
ios	`true` for iOS device
android	`true` for Android device
androidChrome	`true` for Android Chrome
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
capacitor	`true` when app running in capacitor environment
windows	`true` for desktop windows
macos	`true` for desktop macOS
ie	`true` for Internet Explorer browser
edge	`true` for MS Edge browser
firefox	`true` for FireFox 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 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

Device

getDevice

Methods & Properties

Device Related Classes

`getDevice`