o7planning

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
PropertyDescription
screen.widthScreen width in pixels
screen.heightScreen height in pixels.
screen.availWidthScreen width in pixels, minus the space of interface features, for example, Taskbar
screen.availHeightScreen height in pixels, minus the space of interface features, for example, Taskbar
screen.colorDepthReturns the number of bits  used to display a color 
screen.pixelDepthReturns 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:

Maybe you are interested

These are online courses outside the o7planning website that we introduced, which may include free or discounted courses.