o7planning

Javascript Screen Tutorial with Examples

  1. window.screen

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>

ECMAScript, Javascript Tutorials

Show More