jquery code to detect mobile devices and orientation

This page is a demo of jquery code to detect mobile devices and orientation.

So recently there was a need that we had to write some css only for mobile devices and for specific orientation.

Detecting devices and Orientation

I know we could write CSS3 media queries, but unfortunately I could not find a single boiler plate of CSS media queries that could cover each and every single Mobile devices and tablets.

So I decided to write a small js code that would detect device and orientation and apply a class to the body tag.
The page will display the name of the platforms that you are using and the orientation. ie. platforms like Apple, Android, Blackberry, Opera, IE Mobile.

Run this page on Android/IOS or any other mobile devices to see the desired result in the heading above.

Please note it will display orientation only on actual handsets. If you are using desktop browsers and changing user agents, it will only display the OS.

Feel free to add class as per your need.

Detect mobile devices Tutorial

Here is the link to the tutorial and explanation of this code.

Detect mobile devices testing tools

Tested using IOS Simulator and www.browserstack.com

Please feel free to share and comment.

Comments 1