Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detecting if a device is able to change orientation in JavaScript

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

like image 419
Shadi Almosri Avatar asked Dec 10 '12 15:12

Shadi Almosri


1 Answers

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.

like image 62
Matt Coughlin Avatar answered Sep 19 '22 11:09

Matt Coughlin