Article | Date posted : 7 June, 2013 | Updated on : 12 March, 2014

Device Orientation and Mobile Detection Using jQuery

Sponsored Links

I have updated the script to use Chad Smith’s Mobile detection.

There are several methods available when it comes to detecting orientation for tablets and smartphones when using jQuery. Unfortunately the native jQuery listener does not provide a constant result, the results changes depending on devices. For example on an Android it will think your on landscape while on iOS its portrait and visa versa.

Instead of relying on jQuery to handle the detection I have come up with a simple solution by detecting the width and height of the screen, when you rotate your device it will simply detect a change and calculate if its portrait or landscape by checking if the width is wider than the height. This will result in a 100% accurate representation.

This little script will help you along in applying new rules when the screen orientation changes, where css styling can not be applied anymore.

Instead of using jQuery mobile detection you can also detect it using server-side php I have already written a great article for server-side mobile detection. Want to know a solid method of building responsive web sites? Read Server side, media query and jQuery mobile detection.


Getting back to using the jQuery only method

First version

Second version updated 15 January 2014

I have changed the script so that the detection process for on orientation change and on load is within the same function. Now the script is shorter, and you don’t have to duplicate your functions.

Sponsored Links

Comments

2 thoughts on “Device Orientation and Mobile Detection Using jQuery

  1. Great thanks mate will give this a go. Have a look at:

    I have changed the script so that the detection process for on orientation change and on load is withing the same function. Now the script is shorter, and you don’t have to duplicate your functions.

    Spelling of “within”

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow me on Google+

Google Shopping Data Feed Generator

Sponsored Links

Hire Me