JavaScript - The screen object

javascript

// The screen object:
The screen object is used to read the information from the client’s screen. 
The properties of the screen object are:

1. availHeight: Gives the height of client’s screen

2. availWidth: Gives the width of client’s screen.

3. height: Gives the total height of the client’s screen, including the taskbar

4. width: Gives the total width of the client’s screen, including the taskbar 

5. colorDepth: Gives the bit depth of images on the client’s screen.  value is 
   always 24, for compatibility reasons.

6. pixelDepth: The pixelDepth property is not supported in Internet Explorer 9 
   and earlier versions. However, the colorDepth property represents the same 
   thing as the pixelDepth property. Since all major browsers support 
   colorDepth, use that property instead.

We need to typically use the screen.availWidth / screen.availHeight when we need 
to resize a popup.

As on desktop, screen.width and screen.height give the screen size, in device 
pixels. As on the desktop, you never need this information as a web developer 
(unless you are collecting statistics on screen size). Generally we are not 
interested in the physical size of the screen, but how many CSS pixels currently 
fit on it.

Media queries work the same as on desktop. The width and height properties use 
the layout viewport as its reference and are measured in CSS pixels. The 
device-width and device-height properties use the device screen and is measured 
in device pixels.

In other words, width/height mirrors the values of 
document.documentElement.clientWidth and document.documentElement.clientHeight, 
while device-width and device-height mirrors the value of screen.width/height.

I think the difference between the screen.height and screen.availHeight is the space
taken up by the browser toolbar and other buttons.

if (window.screen.availHeight !== window.screen.height) {
  // something's in the way!
  // use available to size window
}

The availHeight property returns the height of the user's screen, in pixels, minus 
interface features like the Windows Taskbar.

What are the properties of the screen object?

  • screen.availWidth / screen.availHeight
  • screen.width / screen.height: the current height and width of the user's screen
  • screen.colorDepth
  • screen.pixelDepth

When do we need to use the screen.availWidth / screen.availHeight?

We typically need to use these properties when we need to resize a popup. See popup

What do we need to know about the screen object?

As on desktop, screen.width and screen.height give the screen size, in device pixels. As on the desktop, you never need this information as a web developer (unless you are collecting statistics on screen size). Generally we are not interested in the physical size of the screen, but how many CSS pixels currently fit on it.

Media queries work the same as on desktop. The width and height properties use the layout viewport as its reference and are measured in CSS pixels. The device-width and device-height properties use the device screen and is measured in device pixels.

In other words, width/height mirrors the values of document.documentElement.clientWidth and document.documentElement.clientHeight, while device-width and device-height mirrors the value of screen.width/height.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License