Device

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
iostrue for iOS device
androidtrue for Android device
desktoptrue for desktop browser
iphonetrue for iPhone
ipodtrue for iPod
ipadtrue for iPad
cordovatrue when app running in cordova environment
phonegapalias for cordova prop
windowstrue for desktop windows
macostrue for desktop macOs
ietrue for Internet Explorer browser
edgetrue for Edge browser
electrontrue when app is running under Electron environment
webViewtrue if app runs in web view - webapp installed to home screen, valid for desktop PWAs installed to desktop
standaloneSame as webView
osContains OS can be ios, android, macos, windows
osVersionContains OS version, e.g. 11.2.0
pixelRatioDevice pixel ratio
Methods
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.

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