JavaScript BOM | Window Screen - GeeksforGeeks

19 Feb, 2019
The Browser Object Model (BOM) is a browser-specific convention referring to all the objects exposed by the web browser. The BOM allows JavaScript to “interact with” the browser.The object of window represents a browser window and all its corresponding features. A window object is created automatically by the browser itself.Java Script’s window.screen object contains information about the user’s screen. It can also be written without the window prefix.
Properties:
screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth
screen.width: screen.width property returns the users screen width in pixels.<!DOCTYPE html><html><body><p id="GFG"></p>  <script>document.getElementById("GFG").innerHTML = " The Screen width is " + screen.width;</script>  </body></html>Output : The Screen width is 1600

<!DOCTYPE html><html><body><p id="GFG"></p>  <script>document.getElementById("GFG").innerHTML = " The Screen width is " + screen.width;</script>  </body></html>
Output :
 The Screen width is 1600

screen.height: screen.height property returns the users screen height in pixels.<!DOCTYPE html><html><body>  <p id="GFG"></p>  <script>document.getElementById("GFG").innerHTML = " The screen height is " + screen.height;</script>  </body></html>Output :The screen height is 900

<!DOCTYPE html><html><body>  <p id="GFG"></p>  <script>document.getElementById("GFG").innerHTML = " The screen height is " + screen.height;</script>  </body></html>
Output :
The screen height is 900

screen.availWidth: screen.availWidth property returns the users screen width in pixels, excluding the interface features.<!DOCTYPE html><html><body>  <p id="GFG"></p>  <script>document.getElementById("GFG").innerHTML = "The available screen width is " + screen.availWidth;</script>  </body></html>Output :The available screen width is 1549

<!DOCTYPE html><html><body>  <p id="GFG"></p>  <script>document.getElementById("GFG").innerHTML = "The available screen width is " + screen.availWidth;</script>  </body></html>
Output :
The available screen width is 1549

screen.availHeight: screen.availHeight property returns the users screen height in pixels excluding the interface features.<!DOCTYPE html><html><body>  <p id="GFG"></p>  <script>document.getElementById("GFG").innerHTML = "The available screen height is " + screen.availHeight;</script>  </body></html>Output : The available screen height is 876

<!DOCTYPE html><html><body>  <p id="GFG"></p>  <script>document.getElementById("GFG").innerHTML = "The available screen height is " + screen.availHeight;</script>  </body></html>
Output :
 The available screen height is 876

screen.colorDepth: screen.colorDepth property returns the bits (number) to be used to display one color.Usually, 24 bit or 32 bit hardware is used for color resolution.24 bits = 16, 777, 216 different (True Colors)32 bits = 4, 294, 967, 296 different (Deep Colors)<!DOCTYPE html><html><body>  <p id="GFG"></p>  <script>document.getElementById("GFG").innerHTML = "The screen color depth is " + screen.colorDepth;</script>  </body></html>Output :The screen color depth is 24

<!DOCTYPE html><html><body>  <p id="GFG"></p>  <script>document.getElementById("GFG").innerHTML = "The screen color depth is " + screen.colorDepth;</script>  </body></html>
Output :
The screen color depth is 24

screen.pixelDepth: screen.pixelDepth property returns the pixel depth of the screen.<!DOCTYPE html><html><body>  <p id="GFG"></p>  <script>document.getElementById("GFG").innerHTML = "The screen pixel depth is " + screen.pixelDepth;</script>  </body></html>Output : The screen pixel depth is 24
My Personal Notes
arrow_drop_upSave
<!DOCTYPE html><html><body>  <p id="GFG"></p>  <script>document.getElementById("GFG").innerHTML = "The screen pixel depth is " + screen.pixelDepth;</script>  </body></html>
Output :
 The screen pixel depth is 24

JavaScript-Misc
JavaScript
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
How to get selected value in dropdown list using JavaScript ?
How to remove duplicate elements from JavaScript Array ?
How to filter object array based on attributes?
How to convert JSON data to a html table using JavaScript/jQuery ?
Introduction to Object Oriented Programming in JavaScript
How to change selected value of a drop-down list using jQuery?