JavaScript BOM | Window Screen

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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output :

     The Screen width is 1600
    
  • screen.height: screen.height property returns the users screen height in pixels.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output :

    The screen height is 900
    
  • screen.availWidth: screen.availWidth property returns the users screen width in pixels, excluding the interface features.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output :

    The available screen width is 1549
    
  • screen.availHeight: screen.availHeight property returns the users screen height in pixels excluding the interface features.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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)

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output :

    The screen color depth is 24
    
  • screen.pixelDepth: screen.pixelDepth property returns the pixel depth of the screen.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <body>
      
    <p id="GFG"></p>
      
    <script>
    document.getElementById("GFG").innerHTML = 
    "The screen pixel depth is " + screen.pixelDepth;
    </script>
      
    </body>
    </html>

    chevron_right

    
    

    Output :

     The screen pixel depth is 24
    


  • My Personal Notes arrow_drop_up

    Recommended Posts:



      Article Tags :

      Be the First to upvote.


      Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.