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):

  1. // If we need it in place where we don't have access to app instance or before we init the app
  2. if (Framework7.device.ios) {
  3. console.log('It is iOS device');
  4. }
  5. // After we init the app we can access it as app instance property
  6. var app = new Framework7({ /*...*/ });
  7. if (app.device.android) {
  8. console.log('It is android device');
  9. }

Methods & Properties

Properties
iostrue for iOS device
androidtrue for Android device
windowsPhonetrue for Windows Phone device
desktoptrue for desktop browser
iphonetrue for iPhone
iphoneXtrue for iPhone X
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 or windowsPhone (for Windows Phone)
osVersionContains OS version, e.g. 11.2.0
pixelRatioDevice pixel ratio
statusbartrue 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.

Device Related Classes

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:

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

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

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

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

  1. <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">
  2. ...

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

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

In other words classes calculated by the following rule:

  1. device-[os]
  2. device-[os major version]
  3. device-[os full version]
  4. [device-desktop]
  5. [device-retina]
  6. [device-iphone-x] - if it is iPhone X
  7. [device-desktop]
  8. [device-macos] - if desktop macOS device
  9. [device-windows] - if desktop windows device
  10. device-pixel-ratio-[pixel ratio]
  11. [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