Get Started
Events
- Events
Router / Navigation
Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Autocomplete
- Badge
- Block / Content Block
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Data Table
- Dialog
- Floating Action Button
- Form Data / Storage
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Lazy Load
- Link
- List View
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Video Intelligence (vi)
- View / Router
- Virtual List
Framework7 Icons
- Framework7 Icons Cheatsheet
Styling
Dom7
- Dom7
Template7
- Template7
Fast Clicks
Utilities
- Request / Ajax
- Utils
- Device
- Support
Plugins API
- Plugins API
Custom Build
- Custom Build

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
windows	`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
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-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