What is the best way to determine the width of the browser in JavaScript?

Question

What is the best way to determine the width of the browser in JavaScript?

I'm attempting to create a JavaScript function that retrieves the current browser width.

After searching, I came across this method:

console.log(document.body.offsetWidth);

However, it doesn't work well if the body width is set to 100%.

Are there any alternative functions or workarounds that would be more effective?

javascript html css

Answer 1

Answer №1

Dealing with this can be quite frustrating. My suggestion would be to avoid wasting time and opt for using jQuery instead. With jQuery, you can simply use $(window).width() to get the window width.

Answer 2

Dealing with this can be quite frustrating. My suggestion would be to avoid wasting time and opt for using jQuery instead. With jQuery, you can simply use $(window).width() to get the window width.

Answer 3

Answer №2

Update for 2017

Originally written in 2009, my answer still holds up, but I want to provide an updated version for 2017. With browsers continuing to behave differently, it's important to ensure cross-browser consistency. The jQuery team does a great job with this, but you don't need to include the entire library. The relevant portion can be found in line 37 of dimensions.js. Here is an extracted and modified standalone version:

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}

function getHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );
}

console.log('Width:  ' +  getWidth() );
console.log('Height: ' + getHeight() );

Original Answer

Since browsers have varying behaviors, it's crucial to test for values and use the correct one. Here's a function that can help:

function getWidth() {
  if (self.innerWidth) {
    return self.innerWidth;
  }

  if (document.documentElement && document.documentElement.clientWidth) {
    return document.documentElement.clientWidth;
  }

  if (document.body) {
    return document.body.clientWidth;
  }
}

And similarly for height:

function getHeight() {
  if (self.innerHeight) {
    return self.innerHeight;
  }

  if (document.documentElement && document.documentElement.clientHeight) {
    return document.documentElement.clientHeight;
  }

  if (document.body) {
    return document.body.clientHeight;
  }
}

You can call these functions in your scripts by using getWidth() or getHeight(). If the browser's native properties are not defined, it will return undefined.

Answer 4

Update for 2017

Originally written in 2009, my answer still holds up, but I want to provide an updated version for 2017. With browsers continuing to behave differently, it's important to ensure cross-browser consistency. The jQuery team does a great job with this, but you don't need to include the entire library. The relevant portion can be found in line 37 of dimensions.js. Here is an extracted and modified standalone version:

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}

function getHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );
}

console.log('Width:  ' +  getWidth() );
console.log('Height: ' + getHeight() );

Original Answer

Since browsers have varying behaviors, it's crucial to test for values and use the correct one. Here's a function that can help:

function getWidth() {
  if (self.innerWidth) {
    return self.innerWidth;
  }

  if (document.documentElement && document.documentElement.clientWidth) {
    return document.documentElement.clientWidth;
  }

  if (document.body) {
    return document.body.clientWidth;
  }
}

And similarly for height:

function getHeight() {
  if (self.innerHeight) {
    return self.innerHeight;
  }

  if (document.documentElement && document.documentElement.clientHeight) {
    return document.documentElement.clientHeight;
  }

  if (document.body) {
    return document.body.clientHeight;
  }
}

You can call these functions in your scripts by using getWidth() or getHeight(). If the browser's native properties are not defined, it will return undefined.

Answer 5

Answer №3

const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
const outerWidth = window.outerWidth; //includes toolbars and status bar etc.
const outerHeight = window.outerHeight;

These values are integers and do not rely on jQuery. They are also compatible across different browsers.

Many times, I have encountered incorrect values with jQuery's width() and height() methods.

Answer 6

const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
const outerWidth = window.outerWidth; //includes toolbars and status bar etc.
const outerHeight = window.outerHeight;

These values are integers and do not rely on jQuery. They are also compatible across different browsers.

Many times, I have encountered incorrect values with jQuery's width() and height() methods.

Answer 7

Answer №4

Why isn't matchMedia getting more attention?

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

I haven't tested it extensively, but I tried it on default Android browsers, Android Chrome, and desktop Chrome, and it seems to be working well so far.

Although it doesn't return a numerical value, it does return a boolean - whether it matches or not. This may not directly answer the question, but it seems to be what we're looking for and likely what the question author intended.

Answer 8

Why isn't matchMedia getting more attention?

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

I haven't tested it extensively, but I tried it on default Android browsers, Android Chrome, and desktop Chrome, and it seems to be working well so far.

Although it doesn't return a numerical value, it does return a boolean - whether it matches or not. This may not directly answer the question, but it seems to be what we're looking for and likely what the question author intended.

Answer 9

Answer №5

Learning from W3schools takes us on a journey back to the days of IE!

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

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

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";

alert("Browser inner window width: " + w + ", height: " + h + ".");

</script>

</body>
</html>

Answer 10

Learning from W3schools takes us on a journey back to the days of IE!

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

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

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";

alert("Browser inner window width: " + w + ", height: " + h + ".");

</script>

</body>
</html>

Answer 11

Answer №6

Check out this simplified version of the previously demonstrated function:

function retrieveWidth() {
    if (self.innerWidth) {
       return self.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientHeight){
        return document.documentElement.clientWidth;
    }
    else if (document.body) {
        return document.body.clientWidth;
    }
    return 0;
}

Answer 12

Check out this simplified version of the previously demonstrated function:

function retrieveWidth() {
    if (self.innerWidth) {
       return self.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientHeight){
        return document.documentElement.clientWidth;
    }
    else if (document.body) {
        return document.body.clientWidth;
    }
    return 0;
}

Answer 13

Answer №7

Building on Travis' response, it's essential to place the getWidth() function in the document body to ensure accurate calculation of scrollbar width. Otherwise, the browser's scrollbar width may be subtracted from the getWidth(). Here is an example of how to implement this:

<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
</body>

You can then use the aWidth variable anywhere in your code.

Answer 14

Building on Travis' response, it's essential to place the getWidth() function in the document body to ensure accurate calculation of scrollbar width. Otherwise, the browser's scrollbar width may be subtracted from the getWidth(). Here is an example of how to implement this:

<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
</body>

You can then use the aWidth variable anywhere in your code.

Answer 15

Answer №8

An easy solution that works across all browsers:

Using the window.innerWidth property

Answer 16

An easy solution that works across all browsers:

Using the window.innerWidth property

Answer 17

Answer №9

A revamped approach to modern JavaScript based on Travis' response:

const determinePageWidth = () => {
  const bodyWidth = document.body
    ? Math.max(document.body.scrollWidth, document.body.offsetWidth)
    : 0;

  const docElementWidth = document.documentElement
    ? Math.max(
        document.documentElement.scrollWidth,
        document.documentElement.offsetWidth,
        document.documentElement.clientWidth
      )
    : 0;

  return Math.max(bodyWidth, docElementWidth);
};

Answer 18

A revamped approach to modern JavaScript based on Travis' response:

const determinePageWidth = () => {
  const bodyWidth = document.body
    ? Math.max(document.body.scrollWidth, document.body.offsetWidth)
    : 0;

  const docElementWidth = document.documentElement
    ? Math.max(
        document.documentElement.scrollWidth,
        document.documentElement.offsetWidth,
        document.documentElement.clientWidth
      )
    : 0;

  return Math.max(bodyWidth, docElementWidth);
};

Answer 19

Answer №10

It seems that no one has brought up the code for calculating the viewport width.

Take note that this method does not include the vertical overflow scrollbar and only measures the visible width of the root <html> element.
It is important to recognize that the root element is always present unlike the <body> element.

document.documentElement.getBoundingClientRect()['width'];

It is worth noting that getBoundingClientRect width may return a decimal number while clientWidth only returns integers.

document.documentElement.clientWidth;

https://i.sstatic.net/fntm8P6t.png

Answer 20

It seems that no one has brought up the code for calculating the viewport width.

Take note that this method does not include the vertical overflow scrollbar and only measures the visible width of the root <html> element.
It is important to recognize that the root element is always present unlike the <body> element.

document.documentElement.getBoundingClientRect()['width'];

It is worth noting that getBoundingClientRect width may return a decimal number while clientWidth only returns integers.

document.documentElement.clientWidth;

https://i.sstatic.net/fntm8P6t.png

Answer 21

Answer №11

function calculateWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}

function calculateHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );
}

console.log('Website Width:  ' +  calculateWidth() );
console.log('Website Height: ' + calculateHeight() );

Answer 22

function calculateWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}

function calculateHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );
}

console.log('Website Width:  ' +  calculateWidth() );
console.log('Website Height: ' + calculateHeight() );

What is the best way to determine the width of the browser in JavaScript?

Answer №1

Answer №2

Update for 2017

Original Answer

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Answer №10

Answer №11

Similar questions

Learn how to retrieve images from the web API at 'https://jsonplaceholder.typicode.com/photos' and showcase them on a webpage using Angular10

One way to retrieve this attribute with jQuery is by specifying the div element in question

Display Django radio buttons in a formatted list using the mark_safe() function

Navigating through tables and selecting rows

Utilizing Angular to Transform an Array of Dates

"Enhance your JavaScript skills with the power of jQuery

How can I place a new ThreeJS child element at the front and center of a scene?

The page continues to refresh even after the fetch() method is called and the promise is resolved, despite setting e.preventDefault()

Creating code in AngularJS

PhoneGap and jQuery prove ineffective in fetching json results from Twitter

Tips for utilizing string interpolation in the style tag of an Angular component

Formatting tables

Updating a data with a JavaScript browser script

Error [ERR_MODULE_NOT_FOUND]: Module could not be located in vscode

Learn how to hide a bar after clicking the "I agree" button with the help of Bootstrap

What is the best way to insert an image into a div?

An error has occurred: Noty (notification library) is not defined in this AngularJS Web Application

The functionality of one button triggering the opening of two dropdown menus simultaneously is being successfully implemented

What is the best way to bring my image to life and move it to

Add the scss file to the vuejs component npm package only if certain conditions specified in the project are met