Mobile devices is the new target of today’s technology. According to 2014 survey, 60% of total internet traffic is coming from mobile devices like tablets and smartphones.

For web developers, we need to make sure that the websites we developed are still looking good and functional in mobile devices.

Mobile devices comes with different built in operating systems and browsers. Apps rendering are different, thus made hard for web developers to deliver the proper contents and functionalities for each device type.

Today, I will show you how to use JavaScript to determine the device type and how to apply conditional statement to deliver the proper functionality for specific device.

In this tutorial, we will use Matthew Hudson’s device.js which is a very light-weight JavaScript library that can detect the device type and add the device name as class into the html tag of your document. This works in most popular mobile devices like android, ios, blackberry, windows, firefox os, meego, desktop, and other mobile devices.

Basic Usage

1. Download the script in github repository or download the demo files by hitting the download button below.

2. Extract the zip file and look for device.js file.

3. Copy the file into your website’s script directory and include the script into the header or footer of your webpage.

<head>
...
<script src="../lib/device.js"></script>
</head>

JavaScript Conditional

Use these conditionals to run scripts for specific device or devices.

if (device.mobile()) {
	//run script for mobile devices
}

if (device.tablet()) {
	//run script for tablet devices
}

if (device.desktop()) {
	//run script for desktop
}

if (device.ios()) {
	//run script for ios devices
}

if (device.ipad()) {
	//run script for ipad devices
}

if (device.iphone()) {
	//run script for iphone devices
}

if (device.ipod()) {
	//run script for ipod devices
}

if (device.android()) {
	//run script for android devices
}

if (device.androidPhone()) {
	//run script for android Phone
}

if (device.androidTablet()) {
	//run script for android Tablet
}

if (device.blackberry()) {
	//run script for blackberry devices
}

if (device.blackberryPhone()) {
	//run script for blackberry Phone
}

if (device.blackberryTablet()) {
	//run script for blackberry Tablet
}

if (device.windows()) {
	//run script for windows devices
}

if (device.windowsPhone()) {
	//run script for windows Phone
}

if (device.windowsTablet()) {
	//run script for windows Tablet
}

if (device.fxos()) {
	//run script for firefox devices
}

if (device.fxosPhone()) {
	//run script for firefox Phone
}

if (device.fxosTablet()) {
	//run script for firefox Tablet
}

if (device.meego()) {
	//run script for meego devices
}

if (device.television()) {
	//run script for television
}

CSS Conditional

The script will add css classes into the html tag which you can use to target elements with the device name as the base class.

sample-tag

.tablet target_selector {
	/* style for tablet */
}

.mobile target_selector {
	/* style for mobile */
}

.ios.ipad.tablet target_selector {
	/* style for ipad tablet */
}

.ios.iphone.mobile target_selector {
	/* style for iphone mobile */
}

.ios.ipod.mobile target_selector {
	/* style for ipod mobile */
}

.android.mobile target_selector {
	/* style for android mobile */
}

.android.tablet target_selector {
	/* style for android tablet */
}

.blackberry.mobile target_selector {
	/* style for blackberry mobile */
}

.blackberry.tablet target_selector {
	/* style for blackberry tablet */
}

.windows.mobile target_selector {
	/* style for windows mobile */
}

.windows.tablet target_selector {
	/* style for windows tablet */
}

.fxos.mobile target_selector {
	/* style for firefox mobile */
}

.fxos.tablet target_selector {
	/* style for firefox tablet */
}

.meego target_selector {
	/* style for meego */
}

.desktop target_selector {
	/* style for desktop */
}

.television target_selector {
	/* style for television */
}

Orientation CSS Conditional

.landscape target_selector {
	/* style for landscape mode */
}

.portrait target_selector {
	/* style for portrait mode */
}
.tablet.landscape target_selector {
	/* style for tablet in landscape mode */
}

.mobile.landscape target_selector {
	/* style for mobile in landscape mode */
}
.tablet.portrait target_selector {
	/* style for tablet in portrait mode */
}

.mobile.portrait target_selector {
	/* style for mobile in portrait mode */
}