Force the Device Orientation (Fire Tablets)

You can use JavaScript to force users to use your app while the device is oriented in a specific direction (portrait or landscape).

The ForceOrientation sample demonstrates how to implement this feature. The code for this sample is located in the following folder of the Amazon Web SDKs:

Amazon-Web-SDKs/Webapps/examples/Cookbook/ForceOrientation/

Download the Amazon Web SDKs from the SKD Download page (click the Web button).

Markup and Style
Orientation-Forcing Function
Invoke the Orientation-Forcing Function

Markup and Style

Your markup should include the content of your app, as well as a div containing a message to display when the device is not being held in the desired orientation.

<div>App content goes here</div>

<div id="forcerotation">
  <div id="message">
    You're holding this the wrong way.
  </div>
</div>

The style shown here is applied to the "wrong way" message, which is initially hidden:

#forcerotation {
    display: none;
    z-index: 1000;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: black;
    color: white;
}

#forcerotation #message {
    position: relative;
    top: 45%;
    text-align: center;
}

Orientation-Forcing Function

The orientation-forcing function relies on the value of a global variable, forcedOrientation, which is the orientation in which the user is forced to hold the device in order to see the app content. forcedOrientation is equal to the string "portrait" or the string "landscape". forcedOrientation is compared to the current orientation of the window and if they do not match, the "wrong way" message is displayed. Here is the code for the orientation-forcing function:

var forcedOrientation = "landscape"; // force the device to be held in landscape
function forceOrientation() {
  var orientation = (Math.abs(window.orientation) === 90 ? "landscape" : "portrait");
  if (orientation !== forcedOrientation) {
    $("#forcerotation").show();
  } else {
    $("#forcerotation").hide();
  }
}

Invoke the Orientation-Forcing Function

The orientation-forcing function needs to be called every time the screen orientation changes. To accomplish this, first detect whether orientation events are recognized. If they are, bind the forceOrientation() function to orientation events so that forceOrientation() gets called any time an orientation event is detected.

function init() {
  if (typeof (window.orientation) !== "undefined") {
    var orientationEvent = "resize";
    if ("onorientationchange" in window) {
        orientationEvent = "orientationchange";
    } else if ("ondeviceorientation" in window) {
        orientationEvent = "deviceorientation";
    }
    console.log("Using " + orientationEvent);
    $(window).bind(orientationEvent, forceOrientation);
    forceOrientation(); // Force orientation on startup
  } else {
    console.log("No orientation supported");
  }
}

$(init);

Last updated: Oct 29, 2020