Category Archives: jQuery

Collection of jQuery lessons, jQuery topics, jQuery exercises, jQuery tutorials, jQuery demos, jQuery examples, jQuery interview questions, jQuery problems, jQuery issues, jQuery plugins, jQuery books, jQuery resources

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.

jQuery code to detect mobile devices

If you have been looking for a jQuery code to detect mobile devices. You have hit the right webpage. The below code will detect whether you are using an iPhone, iPad or a iPod or any other mobile device. It will display a message if you are not using any of the common mobile devices.

1. Include jQuery in your document using the below mentioned script.

2. Add the following at the bottom of your html/php document

3. Put the below code in the body of your document

jQuery code to detect mobile devices – Demo

Here is the link to the demo page.

Just run the demo page on any  mobile device to see the result.

Kindly comment if you any have feedback.

What is JQUERY

What is jQuery?

  • jQuery is an open source cross browser java script library/framework designed to simplify and expedite client side coding
  • The motto of jQuery is “Write Less, Do More”, which simply means you can achieve lot of functionality by writing less code
  • jQuery is most widely used javascript framework/library
  • It also provides the ability for developers to create plug-ins