Framework7
v3
Support Framework7
stars forks
Improve this Doc

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
    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
    webView true if app runs in web view - webapp installed to home screen
    os Contains OS can be ios, android or windows (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

    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:

    <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