Developer Console
Sign In
Sign In
Developer Console

Detecting the Device's Display Characteristics (Fire Tablets)

Introduction

You can use JavaScript and/or CSS media queries to detect and react to the device's display size. For example, you can change the page's background color based on the width and height of the screen. There are two different metrics available when measuring display size: screen size and viewport size.

  • Screen size refers to the size of the device's physical screen.
  • Viewport size refers to the size of the window on the screen.

The ScreenSize sample demonstrates how to use JavaScript and CSS to detect and react to the device's display size. The code for this sample is located in the following folder of the Amazon Web SDKs:

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

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

Use JavaScript to Detect Display Characteristics

When using JavaScript to detect display size, there are two different objects that correspond to the two different display size metrics:

  • The screen object contains information about the screen size.
  • The window object contains information about the viewport size.

You can query the screen object for the following properties:

Selector Accepts min- and max- modifiers Description Example Usage in a Media Query
height yes Describes the height of the window. `@media screen and (min-height: 640px) { ... }`
width yes Describes the width of the window. `@media screen and (min-width: 640px) and (max-width: 800px) { ... }`
aspect-ratio yes Describes the aspect ratio of the window. The value consists of two positive integers separated by a slash (/), representing the ratio of horizontal pixels (first term) to vertical pixels (second term). `@media screen and (min-aspect-ratio: 1/1) { ... }`
device-height yes Describes the height of the entire screen. `@media screen and (min-device-height: 640px) { ... }`
device-width yes Describes the width of the entire screen. `@media screen and (min-device-width: 640px) { ... }`
device-aspect-ratio yes Describes the aspect ratio of the entire screen. The value consists of two positive integers separated by a slash (/), representing the ratio of horizontal pixels (first term) to vertical pixels (second term). `@media screen and (min-device-aspect-ratio: 16/9) { ... }`
orientation no Indicates whether the viewport is in landscape or portrait. `@media screen and (orientation: portrait) { ... }`
resolution yes Indicates the resolution (pixel density) of the output device. `@media screen and (min-resolution: 2dppx) { ... }`

Use CSS to Detect Display Characteristics

Use CSS media queries to detect and respond to different display sizes. Use the following CSS selectors to detect window or screen size:

Example CSS Media Queries

To change the background color based on whether the device is currently in portrait or landscape, use the following sample code:

/* blue background when in portrait */
@media screen and (orientation: portrait) { background: #88F; }

/* green background when in landscape */
@media screen and (orientation: landscape) { background: #8F8; }

To change the background color based on the resolution (pixel density) of the output device, use the following sample code:

/* blue background when pixel density is between 1 and 2 dots per pixel */
@media screen and (min-resolution: 1dppx) and (max-resolution: 2dppx) { background: #88F; }

/* green background when pixel density is at least 2 dots per pixel */
@media screen and (min-resolution: 2dppx) { background: #8F8; }

Last updated: Oct 29, 2020