🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool!

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

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
iostrue for iOS device
androidtrue for Android device
androidChrometrue for Android Chrome
desktoptrue for desktop browser
iphonetrue for iPhone
ipodtrue for iPod
ipadtrue for iPad
cordovatrue when app running in cordova environment
capacitortrue when app running in capacitor environment
windowstrue for desktop windows
macostrue for desktop macOS
ietrue for Internet Explorer browser
edgetrue for MS Edge browser
firefoxtrue for FireFox browser
electrontrue when app is running under Electron environment
nwjstrue when app is running under NW.js 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 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