Detecting if a device is able to change orientation in JavaScript

Posted on

Detecting if a device is able to change orientation in JavaScript – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout javascript and jquery. Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about Detecting if a device is able to change orientation in JavaScript.

Problem :

Is there a native JavaScript (or through the use of a library such as JQuery/Modernizr etc) way to detect if a device is capable of changing orientation? I would like to use that as a method to differentiate between desktop and mobile.

Thanks,

Shadi

Solution :

Detecting mobile devices:

  1. Simple browser sniffing

    if (/mobile/i.test(navigator.userAgent)) {...}
    
  2. jQuery.browser.mobile plug-in (exhaustive browser sniffing)

  3. Simple test for touch events

    if ('ontouchstart' in window) {...}
    
  4. Advanced test for touch events:

    if (('ontouchstart' in window) ||     // Advanced test for touch events
       (window.DocumentTouch && document instanceof DocumentTouch) ||
       ((hash['touch'] && hash['touch'].offsetTop) === 9)) {...}
    

Optionally use onorientationchange for #3 and #4 above.

Combine 1 or more of these (and any other approaches) as needed. None of them are foolproof.

Leave a Reply

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