JavaScript
Need help with current-device?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
matthewhudson

Description

The easiest way 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).

3.6K Stars 598 Forks MIT License 352 Commits 38 Opened issues

Services available

Need anything else?

CURRENT-DEVICE

All Contributors Build Status Bundle size Coverage Status Renovate badge NPM version NPM downloads

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

View the Demo →

EXAMPLES

This module inserts CSS classes into the

 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

 section with the
appropriate classes
based on the device's characteristics.

Installation

npm install current-device

And then import it:

// using es modules
import device from "current-device";

// common.js const device = require("current-device").default;

Or use script tags and globals.


And then access it off the global like so:

console.log("device.mobile() === %s", device.mobile());

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
Television television

Orientation CSS Class Names

Orientation CSS Classes
Landscape landscape
Portrait portrait

CONDITIONAL JAVASCRIPT

This module 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()
Desktop device.desktop()
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()
Television device.television()

Orientation JavaScript Methods

Orientation JavaScript Method
Landscape device.landscape()
Portrait device.portrait()

Orientation JavaScript Callback

device.onChangeOrientation(newOrientation => {
  console.log(`New orientation is ${newOrientation}`);
});

Utility Methods

device.noConflict()

Run

current-device
in noConflict mode, returning the device variable to its previous owner. Returns a reference to the
device
object.
const currentDevice = device.noConflict();

Useful Properties

Access these properties on the

device
object to get the first match on that attribute without looping through all of its getter methods.
JS Property Returns
device.type 'mobile', 'tablet', 'desktop', or 'unknown'
device.orientation 'landscape', 'portrait', or 'unknown'
device.os 'ios', 'iphone', 'ipad', 'ipod', 'android', 'blackberry', 'windows', 'macos', 'fxos', 'meego', 'television', or 'unknown'

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,

current-device
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.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Matthew Hudson

💻 🚧

Rafael Terán

💻

Allan

👀

martinwepner

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.