How to determine if the device is steerable?

This means that it loads the version for small screens , when in reality the user would just have to rotate the device, placing it horizontally to be able to use the version for large screens .

Starting you already have a problem. Having a mobile version and another for desktop is an unnecessary waste of time. With the emergence of the responsive design trend, this should go down in history.

I am interested to know if the device is or not orientable. Is there a way to check it in Javascript?

If possible. Not only is it possible to know if it is adjustable, but also the orientation of the device (portrait or landscape). The property window#orientationusually returns the values:

• -90/bottom
• 0/left
• 90/right
• 180/top

These last two values ​​can change depending on the device, so you must be careful.

For example, the Apple Touch interprets the last value as -90, while the Google Nexus interprets it as 90, which will not let you know if the device is upside down . You may not see it necessary in general, but it's better if you ever need it, it shows you a standard value for all. Another example of this is the Toshiba tablets: most series will show you 180 if you turn it upside down, when the logical thing is for it to be -90, as Google or Amazon does.

If you need to know the orientation of the device, it can be useful window#screen.orientationwhose property typeallows you to know the orientation of the device, which are:

• portrait-primary
• portrait-secondary
• landscape-primary
• landscape-secondary

The primary/secondary is used to interpret whether it is 'upside down' or not.

Note: The property window#orientationwill only be available on devices that support orientation.

There is a web API in charge of screen orientation ( Screen Orientation API ) that allows you to read the type and angle of orientation, know if there are changes in it, and even "lock" orientation changes.

The main problem is that it is experimental and not widely supported. On desktop devices the latest versions of almost all browsers allow this (except Safari), although you may need to use prefixes (see below). And on mobile devices, Chrome and Firefox Mobile yes... but little else.

With this API you can:

• Detect device orientation :

  var orientacionPantalla = window.screen.orientation.type;
  

  As this is an experimental technology, you may need to use device prefixes, something like this (described in the link in this section):

  var orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
  var orientacionPantalla = orientation.type;
  

  The variable orientacionwill then have one of the following values ​​(an example of how it could be used to ask the user to change the orientation if it's not one you want is on the linked page):

  • "landscape-primary"
  • "landscape-secondary"
  • "portrait-primary"
  • "portrait-secondary"

• Lock device orientation with lockOrientation:

  bloqueoPermitido = window.screen.lockOrientation(orientacion);
  

  This would allow you to lock the screen in any of the modes you want (those listed above). It can be a single value or an array. Here is an example to force the screen orientation to stay in landscape mode:

  screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
  
  if (screen.lockOrientationUniversal("landscape-primary")) {
      // la orientación se pudo bloquear
  } else {
      // la orientación no se pudo bloquear
  }
  

• Detect orientation changes : You could still do this with onorientationchange, but this API adds one more possibility by allowing you to associate an event handler changewith the screen orientation ( screen.orientation).

  Something like this:

  screen.orientation.addEventListener("change", function(e) {
       // código a ejecutar cuando se cambie la orientación
  });
  

I understand that you can't exactly detect if the device is steerable (which is what you're asking), but you can detect the orientation and then display a message telling the user "You'd better rotate the device" or force them to rotate it by turning all the way around. content for what you want.

if (typeof window.orientation !== 'undefined') {
    //El dispositivo puede rotarse
    //...
}

• window.orientation is a deprecated property that works in most browsers.
• On devices that can be rotated, it returns 0, 90, -90, or 180 (the current orientation angle). In the rest, it returns undefined.
• It's an easy way, not dependent on screen size or userAgent, but you should test that it works in the browsers you want to use it on.