In this post, we will learn how to get the browser window size or screen size with JavaScript. In some case if we want to know the browser window size, so we can easily get it with JavaScript. So how we can get screen size, we will learn in this post.


How To Get The Browser Window Size OR Screen Size With JavaScript ?


Get The Browser Window Size OR Screen Size

To get the browser window size or screen size, we use  window.innerHeight  and  window.innerWidth  window object properties. 

These properties work in most of  browsers but not in Internet Explorer versions 5, 6, 7, 8.


So for Internet Explorer versions 5, 6, 7, 8 we use these following properties:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

Instead of these we also use these following properties:
  • document.body.clientHeight
  • document.body.clientWidth


For covering all browsers, we use these properties as following:


var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;


var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; code-box


So in this following example we use this above code to get browser window size:


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Get The Browser Window Size OR Screen Size With JavaScript ?</title>
</head>
<body>

<p>Browser Window Width: <span id="width"></span></p>

<p>Browser Window Height: <span id="height"></span></p>

<script>

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;


var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;


document.getElementById("width").innerHTML = width;
document.getElementById("height").innerHTML = height;

</script>
</body>
</html> code-box



Summary

In this post we learned how to get the browser window size or screen size with JavaScript. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post