Detecting if a device is able to change orientation in JavaScript

Question

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

Doesn't most OS's support that? In Windows (other desktop OS's as well I guess) you can change orientation depending on the orientation of your screen. Some use their 16:9 screen in a standing, portrait orientation and so on. Thus, I don't think that will be a good way to differentiate between desktop and mobile, unfortunately. — Christofer Eliasson, Dec 10 '12 at 15:26
@ChristoferEliasson While I agree it's not the best way to differentiate between desktop and mobile, the important part is detecting the orientation changing feature...which is interesting to find out — Ian, Dec 10 '12 at 15:34
Actually, it seems like `onorientationchange` can be a property of `window` if that's available. My browser doesn't have it, but it seems like a valid event - http://stackoverflow.com/questions/5284878/how-do-i-correctly-detect-orientation-change-using-javascript-and-phonegap-in-io — Ian, Dec 10 '12 at 15:37

score 19 · Answer 1 · edited Mar 10 '14 at 17:12

Detecting mobile devices:

Simple browser sniffing

if (/mobile/i.test(navigator.userAgent)) {...}

jQuery.browser.mobile plug-in (exhaustive browser sniffing)
Simple test for touch events
```
if ('ontouchstart' in window) {...}
```

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.

Detecting if a device is able to change orientation in JavaScript

1 Answers1

Linked