Table Of Content

Javascript Screen Tutorial

View more Tutorials:

1- window.screen

When your browser runs on a window.screen computer. It is the object that represents the computer screen. When your browser runs on a window.screen telephone , it is the object that represents the phone screen .... 
The properties of  window.screen:
  • screen.width
  • screen.height
  • screen.availWidth
  • screen.availHeight
  • screen.colorDepth
  • screen.pixelDepth
Property Description
screen.width Screen width in pixels
screen.height Screen height in pixels.
screen.availWidth Screen width in pixels, minus the space of interface features, for example, Taskbar
screen.availHeight Screen height in pixels, minus the space of interface features, for example, Taskbar
screen.colorDepth Returns the number of bits  used to display a color 
screen.pixelDepth Returns the number of pixel depth (bit depth) of the screen
A computer screen using Windows 7 operating system:
A computer screen using the Ubuntu operating system:
For example:
screen-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Screen Example</title>
      <meta charset="UTF-8">


   </head>
   <body>

       <h1>window.screen</h1>

       <button onClick="showInfos()">Show Infos</button>

        <textarea name="name" style="width:100%;margin-top:10px;"
            rows="8" id="log-area"></textarea>

        <script>
           function showInfos()  {

             var logArea = document.getElementById("log-area");
             logArea.value = "";

             logArea.value += "screen.width= " + screen.width +"\n";
             logArea.value += "screen.height= " + screen.height +"\n";
             logArea.value += "screen.availWidth= " + screen.availWidth +"\n";
             logArea.value += "screen.availHeight= " + screen.availHeight +"\n";

             logArea.value += "screen.colorDepth= " + screen.colorDepth +"\n";
             logArea.value += "screen.pixelDepth= " + screen.pixelDepth +"\n";

           }
           showInfos();
        </script>
   </body>
</html>

 

View more Tutorials: