m-device.js
v0.2.7
Published
Device.js makes it easy to write conditional CSS _and/or_ JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo, AppleTV, etc), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
Downloads
8
Readme
DEVICE.JS
Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo, AppleTV, etc), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
EXAMPLES
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
USAGE
Just include the script. The script then updates the <html> section with the appropriate classes based on the device's characteristics.
<script src="device.js"></script>Bower
bower install devicejsCONDITIONAL CSS
The following tables map which CSS classes are added based on device and orientation.
Device CSS Class Names
Orientation CSS Class Names
CONDITIONAL JAVASCRIPT
Device.js also includes support for conditional JavaScript, allowing you to write checks on the following device characteristics:
Device JavaScript Methods
Orientation JavaScript Methods
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();BEST PRACTICES
Environment detection has a high rate of misuse. Often times, folks will attempt to work around browser feature support problems by checking for the affected browser and doing something different in response. The preferred solution for those kinds of problems, of course, is to check for the feature, not the browser (ala Modernizr).
However, that common misuse of device detection doesn't mean it should never be done. For example, device.js could be employed to change the interface of your web app such that it uses interaction patterns and UI elements common to the device it's being presented on. Android devices might get a slightly different treatment than Windows or iOS, for instance. Another valid use-case is guiding users to different app stores depending on the device they're using.
In short, check for features when you need features, and check for the browser when you need the browser.
CONTRIBUTING
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Make change(s)
- Commit your changes (
git commit -am 'Added some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request