JavaScript device detection: Windows, android, iOS, portrait, landscape etc.

A JavaScript solution for device detection – OS, orientation, and type

As more and more visitors are moving to smartphones / mobiles for visiting the websites, it has become important to adjust your website according to the device of the visitors. For instance, the way your desktop version of the website is presenting the information and different components, it should be presented in the smart phones or tablets properly, as well.

For that, you may need to change the CSS or other settings in order to make sure the website adjusts in the viewport and horizontal scrollbar does not appear. The HTML table width, columns etc should be adjusted and so on.

One such solution is using the responsive framework like Bootstrap that adjusts automatically with respect to the user’s device by using its powerful grid system.

The other solution can be detecting the user’s device, operating system, and screen orientation and presenting the website based on that basis.

In this tutorial, I am going to share a simple and light-weight JavaScript plug-in that detects user device; whether it is a desktop, mobile or tablet? It also detects the orientation i.e. portrait or landscape. The plug-in can also detect the operating system of the device including windows, android, iOS, television etc.

A demo of using the device.js plug-in

As you open the demo page in any device, it will highlight your device type and orientation. Have a look by clicking the link or image below:

JavaScript detect device

See online demo and code

As I ran this code on the desktop device for this demo, so it displayed desktop with landscape orientation.

A demo of running device detection plug-in in a smart phone

This time, I executed this code in a smartphone with android OS. The orientation is portrait. See the graphic below to get the idea or run the demo on a smartphone or tablet:

JavaScript detect device mobile

How to use this device.js plug-in?

You may download the plug-in from the link given below:

Credit: matthewhudson

Direct download: zip file (from Github website)

After downloading, extract the file and get the device.js file from lib folder. Place it in the desired location and refer it on the web page before the </body> closing tag.

A little JavaScript code is also required that you may get from the demo page’s code section.

You may program to use different CSS and JavaScript for different devices, operating systems, and orientation. You have to go through the device.js file in order to accomplish it.

Basically, the device.js inserts the classes according to the device in the <html> tag. For complete details, go the developer’s page by using the above link.

Author - Atiq Zia

Atiq is the writer at jquery-az.com, an online tutorial website started in 2014. With a passion for coding and solutions, I navigate through various languages and frameworks. Follow along as we unravel the mysteries of coding together!