Language: ENCN

Device API

Framework7 comes with Device detection library. After you initialize your app you can access myApp.device object which contains useful information about device and platform:

myApp.device.os string. Contains "android" (for Android), "ios" (for iOS), undefined (for any other OS/platform)
myApp.device.osVersion string. Contains version of operating system. Available only for Android and iOS devices. For example, if it is iOS device with iOS version 7.1 then it will contain "7.1".
myApp.device.android boolean. Contains true for Android device, otherwise contains false
myApp.device.ios boolean. Contains true for iOS device, otherwise contains false
myApp.device.ipad boolean. Contains true for iPad, otherwise contains false
myApp.device.iphone boolean. Contains true for iPhone/iPod Touch, otherwise contains false
myApp.device.pixelRatio number. Returns device screen pixel ratio. Actually it is a shortcut of window.devicePixelRatio
myApp.device.webView boolean. Contains true if app runs in UIWebView - webapp installed to home screen or phone gap.
myApp.device.minimalUi boolean. Contains true if minimal-ui mode is enabled: web app running in browser on iPhone/iPod with iOS 7.1+ and minimal-ui viewport meta tag value.
myApp.device.statusBar boolean. Contains true if app running in full-screen mode and requires for Status bar overlay. iOS only

Additional <html> 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 ios-7 ios-7-1 ios-gt-6 pixel-ratio-1">
...

If you open app with iOS 7.1 device with retina screen and your app running in full screen mode (myApp.device.statusBar = true):

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

If you open app with iOS 8.0 device and your app running in full screen mode (myApp.device.statusBar = true):

<html class="ios ios-8 ios-8-0 ios-gt-6 ios-gt-7 with-statusbar-overlay">
...

If you open app on iPhone6 Plus and your app running in full screen mode (myApp.device.statusBar = true):

<html class="ios ios-8 ios-8-0 ios-gt-6 ios-gt-7 retina pixel-ratio-3 with-statusbar-overlay">
...

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

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

In other words class calculated by the following rule:

<html class="[os] [os major version] [os full version] [retina] pixel-ratio-[devicePixelRatio] [with-statusbar-overlay]">
...

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

Access to Device object without/before initialization

It is also possible to access Device object with all its parameters using prototype:

var device = Framework7.prototype.device;
if (device.iphone) {
  console.log('this is iPhone')
}