WINDOW SCREEN JAVASCRIPT

The screen Object

The screen object contains information about the user's display and color pixeles of the screen.

This object is used to get information like screen width, screen height, color-depth etc.

There are many different properties of screen objects that return information about the screen. The following table shows property names with their descriptions.

The screen is a global object so we can use it directly without referring to the window, i.e using window.source and source are both valid.

Get Height And Width Of Screen

The height and width property of the screen object returns the height and width of the user's screen in pixels. These are read-only property

The following example shows how to get the height and width of the screen.

<button onclick="width()">Get Width</button>
<button onclick="height()">Get Height</button>

<script>
  function width(){
    var widthOfScreen = screen.width;
    document.getElementById("width").innerHTML = "Width of screen is " + widthOfScreen + "px.";
  }
  function height() {
      var heightOfScreen = screen.height;
      document.getElementById("height").innerHTML = "Height of screen is " + heightOfScreen + "px.";
    }
</script>

Get Available Height And Width Of Screen

The availHeight and availWidth property of screen object returns the available height and width of the user's screen in pixels (Available height is maximum height browser's window will get if browser is maximised).

The following example shows how to get the available height and width of screen.

<button onclick="width()">Get Available Width</button>
<button onclick="height()">Get Available Height</button>

<script>
  function width(){
    var aWidth = screen.availWidth;
    document.getElementById("width").innerHTML = "Available Width of screen is " + aWidth + "px.";
  }
  function height() {
      var aHeight = screen.availHeight;
      document.getElementById("height").innerHTML = "Available Height of screen is " + aHeight + "px.";
    }
</script>

Get Screen Color Depth

The colorDepth property returns the color depth of the user's screen. The color depth is the number of bits used for each color component in a single pixel, it is also known as bit depth.

The color depth shows how many different colors a device can produce. Example: 1bit color depth can produce 2¹ = 2 different colors, 2bit color depth can produce 2² = 4 and so on.

Most computers use 24bit or 32bit color depth. 24 bit use 8bit for each R, G and B, another 8bit in a 32bit computer used for transparency.

<button onclick="depth()">Get Color Depth</button>

<script>
  function depth(){
    var cDepth = screen.colorDepth;
    document.getElementById("depth").innerHTML = "Color Depth of your device is " + cDepth + "bits.";
  }
</script>

Get Orientation Of Device

The orientation property of the screen object returns orientation of the window screen. The orientation property returns an object 2 informations:

• type - That show orientation type, i.e landscape or vertical
• angle - That show screen angle of the device

<button onclick="orien()">Get Orientation</button>

<script>
  function orien(){
    var orienType = screen.orientation.type;
    var orienAngle = screen.orientation.angle;
    document.getElementById("orien").innerHTML = "Screen orientation is " + orienType + " and angle is " + orienAngle;
  }
</script>