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