Different Ways to Get Window/Screen Size – Javascript, jQuery

No Comment

This article will show how to check browser size using JavaScript and jQuery. It is helpful to understand the screen size of your users’ devices to deliver a better responsive page & user experience.

Detecting Screen Size with JavaScript

1. Using innerWidth and innerHeight properties

JavaScript provides a straightforward way to detect screen size using the window object. You can access the innerWidth and innerHeight properties of the window object to get the width and height of the viewport.

code snippet:

// JavaScript
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;

console.log("Screen width: " + screenWidth);
console.log("Screen height: " + screenHeight);

full html & javascript code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Resize Detection</title>
</head>
<body>

<div>Screen Size: <span id="width"></span> x <span id="height"></span></div>

<script>
  // Function to update screen size
  function updateSize() {
    var width = window.innerWidth;
    var height = window.innerHeight;
    document.getElementById('width').textContent = width;
    document.getElementById('height').textContent = height;
  }

  // Initial call to update size
  updateSize();

  // Add event listener for window resize
  window.addEventListener('resize', function() {
    updateSize();
  });
</script>

</body>
</html>

output:

The below screenshot shows, resizing the window and capturing the current screen size for a responsive page.

javascript detect screen size responsive

Alternative Methods:

2. Using document.documentElement.clientWidth and document.documentElement.clientHeight

These properties return the width and height of the viewport, excluding the scrollbar, in pixels.

const screenWidth = document.documentElement.clientWidth;
const screenHeight = document.documentElement.clientHeight;

3. Using screen.width and screen.height

These properties return the total width and height of the user’s screen, including the taskbar and any other system elements.

const screenWidth = screen.width;
const screenHeight = screen.height;

Detecting Screen Size with jQuery

1. Using $(window).width() and $(window).height()

If you’re already using jQuery in your project then use the $(window).width() and $(window).height() functions to get the window’s width & height of the viewport.

code snippet:

// jQuery
const screenWidth = $(window).width();
const screenHeight = $(window).height();

console.log("Screen width: " + screenWidth);
console.log("Screen height: " + screenHeight);

full html & jquery code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Resize Detection with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div>Screen Size: <span id="width"></span> x <span id="height"></span></div>

<script>
  // Function to update screen size
  function updateSize() {
    var width = $(window).width();
    var height = $(window).height();
    $('#width').text(width);
    $('#height').text(height);
  }

  // Initial call to update size
  updateSize();

  // Add event listener for window resize using jQuery
  $(window).resize(function() {
    updateSize();
  });
</script>

</body>
</html>

Alternative Methods:

2. Using $(document).width() and $(document).height()

These functions return the width and height of the entire document, including any overflowed content.

const docWidth = $(document).width();
const docHeight = $(document).height();

3. Using $(window).outerWidth() and $(window).outerHeight()

These functions return the width and height of the viewport, including any scrollbar and borders.

const outerWidth = $(window).outerWidth();
const outerHeight = $(window).outerHeight();