How To Get Information About The User Screen In JavaScript

admin_img Posted By Bajarangi soft , Posted On 09-10-2020

In Java script we can get window.screen object contains information about the user's screen.

How To Get Information About The User Screen In JavaScript

Window Screen

The window.screen object can be written without the window prefix.

Properties:

  • screen.width

  • screen.height

  • screen.availWidth

  • screen.availHeight

  • screen.colorDepth

  • screen.pixelDepth


Window Screen Width

The screen.width property returns the width of the visitor's screen in pixels.

Example(1)

<h2 id="demo" ></h2>
<script>
    document.getElementById("demo").innerHTML =
        "Screen width is " + screen.width;
</script>

In above example display the width of the screen in pixels.

Window Screen Height

The screen.height property returns the height of the visitor's screen in pixels.

<h2 id="demo1" ></h2>
<script>
     document.getElementById("demo1").innerHTML =
        "Screen height is " + screen.height;
</script>

In above example display the width of the screen in pixels.

Complete Code For Getting Information About The User Screen In JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Get Information About The User Screen In JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: tomato">Get Information About The User Screen In JavaScript</h1>
    </div>

    <div class="well">
        <h2 id="demo" ></h2>
        <h2 id="demo1" ></h2>
        <script>
            document.getElementById("demo").innerHTML =
                "Screen width is " + screen.width;

            document.getElementById("demo1").innerHTML =
                "Screen height is " + screen.height;
        </script>
    </div>
</div>
</body>
</html>

 

Related Post