Download
User Rating: 0/5 ( 0 votes)
Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
Device.js inserts CSS classes into the <html> element.
iPhone
Android Tablet
Blackberry Tablet
DEVICE SUPPORT
-
iOS: iPhone, iPod, iPad
-
Android: Phones & Tablets
-
Blackberry: Phones & Tablets
-
Windows: Phones & Tablets
-
Firefox OS: Phones & Tablets
1. INCLUDE STYLESHEET AND JAVASCRIPT
<script src="device.js"></script>
2. CONDITIONAL CSS
The following tables map which CSS classes are added based on device and orientation.
Device CSS Class Names
|
Device |
CSS Classes |
|
iPad |
ios ipad tablet |
|
iPhone |
ios iphone mobile |
|
iPod |
ios ipod mobile |
|
Android Phone |
android mobile |
|
Android Tablet |
android tablet |
|
BlackBerry Phone |
blackberry mobile |
|
BlackBerry Tablet |
blackberry tablet |
|
Windows Phone |
windows mobile |
|
Windows Tablet |
windows tablet |
|
Firefox OS Phone |
fxos mobile |
|
Firefox OS Tablet |
fxos tablet |
|
MeeGo |
meego |
|
Desktop |
desktop |
Orientation CSS Class Names
|
Orientation |
CSS Classes |
|
Landscape |
landscape |
|
Portrait |
portrait |
3. CONDITIONAL JAVASCRIPT
Device.js also includes support for conditional JavaScript, allowing you to write checks on the following device characteristics:
Device JavaScript Methods
|
Device |
JavaScript Method |
|
Mobile |
device.mobile() |
|
Tablet |
device.tablet() |
|
iOS |
device.ios() |
|
iPad |
device.ipad() |
|
iPhone |
device.iphone() |
|
iPod |
device.ipod() |
|
Android |
device.android() |
|
Android Phone |
device.androidPhone() |
|
Android Tablet |
device.androidTablet() |
|
BlackBerry |
device.blackberry() |
|
BlackBerry Phone |
device.blackberryPhone() |
|
BlackBerry Tablet |
device.blackberryTablet() |
|
Windows |
device.windows() |
|
Windows Phone |
device.windowsPhone() |
|
Windows Tablet |
device.windowsTablet() |
|
Firefox OS |
device.fxos() |
|
Firefox OS Phone |
device.fxosPhone() |
|
Firefox OS Tablet |
device.fxosTablet() |
|
MeeGo |
device.meego() |
Orientation JavaScript Methods
|
Orientation |
JavaScript Method |
|
Landscape |
device.landscape() |
|
Portrait |
device.portrait() |
Utility Methods
device.noConflict()
Run device.js in noConflict mode, returning the device variable to its previous owner. Returns a reference to the device object.
var devicejs = device.noConflict();
JS Tutorial
