¿Cambiar a Español?

Detecting the client device easily with device.js

Quick note regarding device detection on JavaScript

Detecting the client device easily with device.js
10 September 2015

Do you find yourself creating "isMobile" variables in Javascript quite often? What about manually adding a "mobile" or "tablet" class to the body or the HTML tag? If you fall into that group, pay attention to this! Don't waste your time anymore. Just use this super useful and easy library called device.js.

Device.js makes it easy to write conditional CSS and/or JavaScript based on the device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo, AppleTV, etc), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).

Device.js will update automatically the classes in the HTML tag based on the device and orientation. Example:

<html lang="en" class=" desktop portrait">

When I change my user agent to iPad iOS 6, it shows:

<html lang="en" class="ios ipad tablet portrait">

Then you can use those classes to style your website accordingly.

At the same time, on JavaScript, you can access the same information like this:

device.portrait() === true
device.landscape() === false
device.mobile() === false
device.tablet() === false
device.ipad() === false
device.ipod() === false
device.iphone() === false
device.android() === false
device.androidTablet() === false
device.blackberryTablet() === false
Before you continue...

By clicking "Accept All", you agree to the storing of cookies on your device to enhance site navigation and analyze site usage.


¿Cambiar a Español?