CSSOM Screen

The Screen interface is a handy interface to inspect details regarding the screen where the underlying browser window is displayed.

As discussed in the previous Window — JavaScript CSSOM chapter, the CSSOM View Module - W3C specification defines all the interfaces and features of the CSSOM that are related to the visual view of a web page. This includes the Screen interface as well.

In this chapter, we'll learn about the various properties of the Screen interface, including width and height to get the precise width and height of the screen in pixels; availWidth and availHeight to get the available width and height excluding any taskbars laid out by the OS; and also the screen object which is an instance of Screen.

The Screen interface represents the screen on which the current web page's window is displayed. It allows us to obtain some useful information regarding the screen, such as its width, its height, its orientation, and so on.

Technically speaking, Screen can be referred to as a singleton class, i.e. it can have only one single instance of it at a time. For us, that instance is the global screen object.

The Screen interface extends the EventTarget interface as it allows us to handle the orientationchange event on it. However, this is a legacy feature that's continued to date for the sake of supporting old browsers, and likewise we won't be exploring it.

Here are the properties of the interface:

Let's discover each one of these separately...

To obtain the exact dimensions of the screen, in terms of CSS pixels, we have the width and height properties of the Screen interface.

In particular, width returns a number representing the total width of the screen, whereas height returns a number representing the total height of the screen.

Shown below is a very elementary example:

alert(`Width: ${screen.width}; Height: ${screen.width}`);

As soon as the underlying page loads, we alert the screen's width and height.

Live Example

If we try out the example above on a mobile device, we observe an important thing as discussed below.

The device's orientation matters!

screen.width and screen.height both return the width and height of the screen in the current orientation.

For instance, let's suppose that we have a device that is 800 CSS pixels tall and 360 pixels wide.

When held in portrait orientation, screen.width would be 360 while screen.height would be 800. However, if the same device is held in landscape orientation, screen.width would be 800 and screen.height would be 360.

The figure below illustrates this:

You might have noticed two properties of the Screen interface similar in name to width and height in the section above, i.e. availWidth and availHeight.

Both these properties, as the names suggest, tell us about the available width and height of the screen.

This excludes the dimensions of those features laid out by the operating system on the screen whereby windows don't show up. The taskbar, at the bottom of the screen, on the Windows OS is a very simple example of this — windows show up above the taskbar and hence it doesn't count in the screen's available dimensions.

So, to state is precisely, availWidth returns a number representing the available width of the screen, whereas availHeight returns a number representing the available height of the screen, both in terms of CSS pixels.

Shown below is an example, similar to the one above:

alert(`Available width: ${screen.availWidth}; Available height: ${screen.availHeight}`);

As soon as the underlying page loads, we output the values of availWidth and availHeight.

Live Example

Apart from the dimensions of the underlying screen, the Screen interface also comes equipped with a property to help us retrieve some information regarding its orientation. That property is orientation.

The orientation property of the Screen interface is an instance of ScreenOrientation.

ScreenOrientation contains a couple of properties and a couple of methods to work with the device's orientation, such as figuring out whether the device is held in portrait or landscape, or locking the screen in a given orientation.

Following is the list of the properties and methods:

At the time of this writing, ScreenOrientation is still a relatively new technology and hasn't been adopted completely across major browsers. You can even inspect the browser compatibility table at ScreenOrientation API — Can I use.

Let's consider one simple example.

In the following code, we alert the orientation.type of the screen object as the underlying page loads:

alert(`Orientation: ${screen.orientation.type}`);

Live Example

Try visiting the link above on a mobile device with different orientations of the device. As you do so, you'll notice a different orientation type alerted back to you.