---
title: "Screen | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Interface Screen

The **`Screen`** interface represents a screen, usually the one on which the current window is being rendered, and is obtained using window.screen.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Screen)

interface Screen {  
    [availHeight](#availheight): number;  
    [availWidth](#availwidth): number;  
    [colorDepth](#colordepth): number;  
    [height](#height): number;  
    [orientation](#orientation): [ScreenOrientation](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ScreenOrientation/);  
    [pixelDepth](#pixeldepth): number;  
    [width](#width): number;  
}

##### Index

### Properties[](#properties)

[availHeight](#availheight) [availWidth](#availwidth) [colorDepth](#colordepth) [height](#height) [orientation](#orientation) [pixelDepth](#pixeldepth) [width](#width)

## Properties[](#properties-1)

### `Readonly`availHeight[](#availheight)

availHeight: number

The read-only Screen interface's **`availHeight`** property returns the height, in CSS pixels, of the space available for Web content on the screen. Since Screen is exposed on the Window interface's window.screen property, you access availHeight using window.screen.availHeight.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Screen/availHeight)

### `Readonly`availWidth[](#availwidth)

availWidth: number

The **`Screen.availWidth`** property returns the amount of horizontal space (in CSS pixels) available to the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Screen/availWidth)

### `Readonly`colorDepth[](#colordepth)

colorDepth: number

The **`Screen.colorDepth`** read-only property returns the color depth of the screen. Per the CSSOM, some implementations return 24 for compatibility reasons. See the browser compatibility section for those that don't.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Screen/colorDepth)

### `Readonly`height[](#height)

height: number

The **`Screen.height`** read-only property returns the height of the screen in CSS pixels.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Screen/height)

### `Readonly`orientation[](#orientation)

orientation: [ScreenOrientation](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ScreenOrientation/)

The **`orientation`** read-only property of the Screen interface returns the current orientation of the screen.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Screen/orientation)

### `Readonly`pixelDepth[](#pixeldepth)

pixelDepth: number

Returns the bit depth of the screen. Per the CSSOM, some implementations return 24 for compatibility reasons. See the browser compatibility section for those that don't.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Screen/pixelDepth)

### `Readonly`width[](#width)

width: number

The **`Screen.width`** read-only property returns the width of the screen in CSS pixels.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Screen/width)