• << Fire OS Developer Docs
• Get Started
  • Get Started with Fire Tablets
  • Set Up Your Development Environment for Fire Tablets
  • Create Your First Fire Tablet App
  • Connect to Fire Tablet through ADB
  • Get started with Amazon Stylus SDK
  • UX Specifications
  • User Agent Strings for Fire Tablets
  • Supported Android Intents
  • FAQs for Fire Tablets
• Fire OS for Fire Tablets
  • Fire OS 8 for Fire Tablets
  • Fire OS 7 for Fire Tablets
  • Fire OS 6 for Fire Tablets
• Android Apps
  • Screen Layout and Resolution
  • Device Orientation
  • Soft Key Bar
  • Button Size and Placement
  • Graphics Performance
  • Data Transfers and Mobile Networks
  • Launcher Icon Guidelines
  • App Installation Location
  • Advertising ID
  • Resources for International Locales
• Test your Android Apps
  • Run Your App on a Fire Tablet
  • Test Without an Amazon Device
  • Take Screenshots on Fire Tablets
• Web Apps
  • Get Started with Web Apps
  • Set up Development Environment
  • Best Practices for Developing Web Apps
  • Web App FAQs
  • Detect the Device Display Characteristics
  • Force the Device Orientation
  • Handle Device Orientation
  • Automatically Scale an Element to Fill the Screen
  • HTTP Caching
  • Protect Your Web App
  • Capture Media from Device Sensors
  • Use Geolocation Data
• Test Your Web Apps
  • Install and Use the Amazon Web App Tester
  • Debug Your Web App
  • Use the Debug APK to Test Your App
• HTML5 Hybrid Apps
  • HTML5 Hybrid Apps
  • Build and Test Your HTML5 Hybrid App
  • HTML5 Hybrid App FAQs
• React Native for Fire Tablet
  • Get Started with React Native (Fire Tablets)
  • Supported React Native Libraries (Fire Tablets)
• Accessibility
  • Assistive Technologies for Fire OS
  • Implement Accessibility in Fire OS
  • Accessibility Features
    • Implement Reading and Subscribing to AD/CC Settings

Handle Device Orientation (Fire Tablets)

Device orientation data is available to your app through JavaScript on devices that support the ondeviceorientation property of the window object. The W3C provides a DeviceOrientation Event Specification that describes how to access device orientation data.

• Detect Whether Device Orientation is Supported
• Handle Device Orientation Events

Detect Whether Device Orientation is Supported

To detect whether device orientation is supported, check to see whether the ondeviceorientation property is present in the window object. If it is present, device orientation is supported. Once you have checked to ensure device orientation is a supported property, add a listener for device orientation events to the window, and assign a handler.

if ("ondeviceorientation" in window) {
  // device orientation is supported
  // add an event listener for device orientation events and assign a handler
  window.addEventListener("deviceorientation", deviceOrientationEventHandler);
} else {
  // device orientation is not supported
}

Handle Device Orientation Events

The handler function receives device orientation event data, which consists of the following properties:

• alpha (double) is the degree of rotation around the Z axis, ranging from [0, 360).
• beta (double) is the degree of rotation around the X axis, ranging from [–180, 180).
• gamma (double) is the degree of rotation around the Y axis, ranging from [–90, 90).
• absolute (boolean) is true when the values for the three angles are relative to the Earth's coordinate frame.

An example handler function is shown here:

function deviceOrientationEventHandler(deviceOrientationData) {
  var alpha = deviceOrientationData.alpha;
  var beta = deviceOrientationData.beta;
  var gamma = deviceOrientationData.gamma;
  var absolute = deviceOrientationData.absolute;

  console.log("Alpha: " + alpha + " Beta: " + beta + " Gamma: " + gamma + " Absolute: " + absolute);
}

In the DeviceOrientation sample, numerical device orientation information is displayed above a bubble level that shows a visual representation of the same data. To display this data, a variable called orientation is created to keep track of the device's screen orientation (portrait or landscape). Once the screen orientation is known, math is applied to normalize the beta and gamma measurements.

Note that the normalization performed in the example is a simple transform, not a full polar normalization. Once the data is normalized, the displayed numerical values are updated, and the position of the bubble in the bubble level is also updated.

Last updated: Oct 29, 2020