Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/matthewhudson/device.js

📱 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).
https://github.com/matthewhudson/device.js

device-detection javascript mobile

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/matthewhudson/device.js
Owner: matthewhudson
License: mit
Created: 2012-09-19T18:50:42.000Z (about 12 years ago)
Default Branch: master
Last Pushed: 2024-05-18T02:55:24.000Z (4 months ago)
Last Synced: 2024-05-29T03:56:30.027Z (4 months ago)
Topics: device-detection, javascript, mobile
Language: JavaScript
Homepage: https://matthewhudson.github.io/current-device/
Size: 1.05 MB
Stars: 3,925
Watchers: 124
Forks: 587
Open Issues: 60
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Authors: AUTHORS

Awesome Lists containing this project

awesome - matthewhudson / device.js

README

        # [CURRENT-DEVICE](https://matthewhudson.github.io/current-device/)

[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)

[![Build Status](https://travis-ci.com/matthewhudson/current-device.svg?branch=master)](https://www.travis-ci.com/matthewhudson/current-device)

[![Bundle size](https://badgen.net/bundlephobia/minzip/current-device)](https://bundlephobia.com/[email protected])

[![Coverage Status](https://codecov.io/gh/matthewhudson/current-device/branch/master/graph/badge.svg?token=88TRoAbpd7)](https://codecov.io/gh/matthewhudson/current-device)

[![NPM version](https://badge.fury.io/js/current-device.svg)](http://badge.fury.io/js/current-device)

[![NPM downloads](https://img.shields.io/npm/dm/current-device.svg)](https://www.npmjs.com/package/current-device)

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 →](https://matthewhudson.github.io/current-device/)

### EXAMPLES

This module inserts CSS classes into the `` element.

#### iPhone



#### Android Tablet



#### Blackberry Tablet



### DEVICE SUPPORT

- iOS: iPhone, iPod, iPad

- macOS

- Android: Phones & Tablets

- Blackberry: Phones & Tablets

- Windows: Phones, Tablets, Desktops

- Firefox OS: Phones & Tablets

### USAGE

Just include the script. The script then updates the `` section with the

[appropriate classes](https://github.com/matthewhudson/current-device#conditional-css)

based on the device's characteristics.

## Installation

```sh

npm install current-device

```

And then import it:

```js

// using es modules

import device from "current-device";

// common.js

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

```

Or use script tags and globals.

```html

```

And then access it off the global like so:

```js

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

	

	

		Mac

		macos desktop

	

	

		Android Phone

		android mobile

	

	

		Android Tablet

		android tablet

	

	

		BlackBerry Phone

		blackberry mobile

	

	

		BlackBerry Tablet

		blackberry tablet

	

	

		Windows Phone

		windows mobile

	

	

		Windows Tablet

		windows tablet

	

	

		Windows Desktop

		windows desktop

	

	

		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()

	

	

		Mac

		device.macos()

	

	

		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

```js

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.

```js

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](http://modernizr.com/)).

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](https://allcontributors.org/docs/en/emoji-key)):

  

    
_{Matthew Hudson}
💻 🚧

    
_{Rafael Terán}
💻

    
_Allan
👀

    
_martinwepner
💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!