Device

Methods & Properties
Device Related Classes

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

It is avaialable 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
windowsPhone	`true` for Windows Phone device
desktop	`true` for desktop browser
iphone	`true` for iPhone
iphoneX	`true` for iPhone X
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
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` or `windowsPhone` (for Windows Phone)
osVersion	Contains OS version, e.g. `11.2.0`
pixelRatio	Device pixel ratio
statusbar	`true` if app running in full-screen mode and requires Status Bar overlay
Methods
needsStatusbarOverlay()	Returns `true` if app running in full-screen mode and requires Status Bar overlay
prefersColorScheme()	Returns pereferd 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.

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

So if you open app with iOS 7.1 device you may have the following classes:

<html class="ios device-ios device-ios-7 device-ios-7-1 device-ios-gt-6 device-pixel-ratio-1">
...

If you open app with iOS 7.1 device with retina screen and your app running in full screen mode:

<html class="device-ios device-ios-7 device-ios-7-1 device-ios-gt-6 device-retina device-pixel-ratio-2 with-statusbar">
...

If you open app on iPhone X and your app running in full screen mode:

<html class="device-ios device-iphone-x device-ios-11 device-ios-11-0 device-ios-gt-6 device-ios-gt-7 device-ios-gt-8 device-ios-gt-9 device-ios-gt-10 device-retina device-pixel-ratio-3 with-statusbar">
...

If you open app with Android 4.4 device you will have the following classes:

<html class="device-android device-android-4 device-android-4-4">
...

In other words classes calculated by the following rule:

device-[os]
device-[os major version]
device-[os full version]
[device-desktop]
[device-retina]
[device-iphone-x] - if it is iPhone X
[device-desktop]
[device-macos] - if desktop macOS device
[device-windows] - if desktop windows device
device-pixel-ratio-[pixel ratio]
[with-statusbar] - in case the app is running in full screen mode

Note that "greater than" (ios-gt-6: for all iOS greater than iOS 6) classes available only for iOS

Device

Methods & Properties

Device Related Classes