SponsorsBecome a sponsor
- Get Started
- Events
- Router / Navigation
- Store
- Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Area Chart
- Autocomplete
- Badge
- Block / Content Block
- Breadcrumbs
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Color Picker
- Contacts List
- Data Table
- Dialog
- Floating Action Button / FAB
- Form Data / Storage
- Gauge
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Link
- List Button
- List View
- List Index
- Login Screen
- Menu List
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Segmented
- Sheet Modal
- Skeleton
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swipeout
- Swiper
- Tabs
- Text Editor
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Tooltip
- Treeview
- View / Router
- Virtual List
- Framework7 Icons
- Styling
- Dom7
- Touch Utilities
- Utilities
- Plugins API
- Lazy Modules
- Custom Build
Device
Framework7 comes with Device detection library with which contains useful information about device and platform.
It is available 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');
}getDevice
When we use Framework7 on server-side environments or with ES modules, we need to use getDevice util instead:
import { getDevice } from 'framework7';
const device = getDevice();
if (device.android) {
console.log('It is android device');
}If we use it on server-side, we can also pass userAgent for the case if we know it based on the request:
import { getDevice } from 'framework7';
const device = getDevice({ userAgent: 'SOME_USER_AGENT' });
if (device.android) {
console.log('It is android device');
}Methods & Properties
| Properties | |
|---|---|
| ios | true for iOS device |
| android | true for Android device |
| androidChrome | true for Android Chrome |
| desktop | true for desktop browser |
| iphone | true for iPhone |
| ipod | true for iPod |
| ipad | true for iPad |
| cordova | true when app running in cordova environment |
| capacitor | true when app running in capacitor environment |
| windows | true for desktop windows |
| macos | true for desktop macOS |
| ie | true for Internet Explorer browser |
| edge | true for MS Edge browser |
| firefox | true for FireFox browser |
| electron | true when app is running under Electron environment |
| nwjs | true when app is running under NW.js environment |
| webView | true if app runs in web view - webapp installed to home screen, valid for desktop PWAs installed to desktop |
| standalone | Same as webView |
| os | Contains OS can be ios, android, macos, windows |
| osVersion | Contains OS version, e.g. 11.2.0 |
| pixelRatio | Device pixel ratio |
| Methods | |
| prefersColorScheme() | Returns preferred 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
Device detecting library adds additional classes on <html> element which can help you with different CSS styles for different OS and platforms.
In other words classes calculated by the following rule:
device-[os]
device-desktop
device-macos - if desktop macOS device
device-windows - if desktop windows device
device-pixel-ratio-[pixel ratio]
device-cordova - if app running under cordova