Skip to main content

JavaScript Screen property

The window.screen object in JavaScript contains information about the user's screen, such as its height, width, and color depth.

It can be used to create a better user experience by adapting the content to the screen size and resolution of the user's device.

Here are some of the most commonly used properties of the window.screen object:

  • screen.width and screen.height: returns the width and height of the screen in pixels.
  • screen.availWidth and screen.availHeight: returns the available width and height of the screen in pixels, excluding the size of the taskbar or other UI elements.
  • screen.pixelDepth and screen.colorDepth: returns the number of bits used to represent each pixel on the screen, indicating the color depth or the number of colors that can be displayed.
  • screen.orientation: returns an object that represents the orientation of the screen, including its angle, type, and lock status.

Here's an example of how to use the screen.width and screen.height properties to get the dimensions of the user's screen:

const width = window.screen.width;
const height = window.screen.height;
console.log(`The screen has a resolution of ${width}px x ${height}px`);

In this example:

  • The width and height properties are accessed on the screen object to get the dimensions of the screen, and the result is logged to the browser console using the console.log() method.