217

I am trying to write a JavaScript function to get the current browser width.

I found this one:

console.log(document.body.offsetWidth);

But its problem that it fail if the body has width 100%.

Is there any other better function or a workaround?

Improve this question

12 Answers 12

Reset to default
310

It's a pain in the ass. I recommend skipping the nonsense and using jQuery, which lets you just do $(window).width().

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

If I recalled correctly, jQuery has pulled much of dimensions into the core. Do you still need dimensions to do what you're suggesting?
The $(window).width() support in jQuery is since version 1.2, in case it's relevant to anybody.
I've found that $(window).width() does not always return the same value as innerWidth / clientWidth as per the examples in the answer below. jQuery's version doesn't take browser scrollbars into account (in FF anyway). This caused me a lot of confusion with CSS @media queries appearing to trigger at the wrong width. Using native code seems to be more reliable as it takes the appearance of the scrollbars into account.
Adding 30k lines of code to get window width is a BAD solution!
@codechimp "Adding 30k lines of code to get window width is a BAD solution!" Proceeds to add a 80k file just to get window width. Bad is relative.
|
197

Update for 2017

My original answer was written in 2009. While it still works, I'd like to update it for 2017. Browsers can still behave differently. I trust the jQuery team to do a great job at maintaining cross-browser consistency. However, it's not necessary to include the entire library. In the jQuery source, the relevant portion is found on line 37 of dimensions.js. Here it is extracted and modified to work standalone:

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 all browsers behave differently, you'll need to test for values first, and then use the correct one. Here's a function that does this for you:

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;
  }
}

Call both of these in your scripts using getWidth() or getHeight(). If none of the browser's native properties are defined, it will return undefined.

Improve this answer

7 Comments

Best answer because I dont have to include a 33k library for a simple redirect based on browser window width
This produces the right (or expected) results consistently compared to jQuery's implementation.
... each of these three shows some result and all results (widths) are different. For example with Google Chrome see self.innerWidth 423, document.documentElement.clientWidth 326 and document.body.clientWidth 406. In such case question: which is correct and which to use? For example i want to resize google map. 326 or 423 big difference. If width ~ 700, then see 759, 735, 742 (not so big difference)
@user2118559 var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0); and var windowWidth = self.innerWidth || -1; // because of "body" or "screen" or "document" are not the "window" if you check an overflowed content of html you can understand. # i.sstatic.net/6xPdH.png
@Travis is this still true in 2017? Or is window.innerWidth enough today?
|
66 
var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;

Both return integers and don't require jQuery. Cross-browser compatible.

I often find jQuery returns invalid values for width() and height()

Improve this answer

2 Comments

Having trouble using this on Safari iphone.
Getting undefined for all these
28

Why nobody mentions matchMedia?

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

Did not test that much, but tested with android default and android chrome browsers, desktop chrome, so far it looks like it works well.

Of course it does not return number value, but returns boolean - if matches or not, so might not exactly fit the question but that's what we want anyway and probably the author of question wants.

Improve this answer

4 Comments

Only supports IE10+.
If they use IE9 or older, they do not deserve the internet.
Safari iphone does not seem to support this.
Newer iOS Safari versions should support matchMedia. Source: caniuse.com/#feat=matchmedia
10

From W3schools and its cross browser back to the dark ages 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>
Improve this answer

3 Comments

The approach works beautifully and could be the accepted answer, because it is much shorter than any other solution (apart from using jQuery).
Won't it throw an error if document.documentElement is undefined?
This really needs more articulation on what you suggest and why.
7

Here is a shorter version of the function presented above:

function getWidth() {
    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;
}
Improve this answer

2 Comments

Which fails to return a value if all the conditions are false.
You don't need the elses :)
1

An important addition to Travis' answer; you need to put the getWidth() up in your document body to make sure that the scrollbar width is counted, else scrollbar width of the browser subtracted from getWidth(). What i did ;

<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>

and call aWidth variable anywhere afterwards.

Improve this answer

Comments

1

simple way for all browsers

window.innerWidth

Improve this answer

Comments

1

Since nobody else has mentioned code that calculates the viewport width.

  • Notice that this procedure excludes the vertical overflow scrollbar and only measures the viewable width of the root <html> element.
  • Notice that the root element is always present unlike the <body> element.
document.documentElement.getBoundingClientRect()['width'];
  • Notice getBoundingClientRect width can return a decimal number and clientWidth returns only integers.
document.documentElement.clientWidth;

enter image description here

Improve this answer

1 Comment

This is the best way, yes.
0

An adapted solution to modern JS of Travis' answer:

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

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

  return Math.max(bodyMax, docElementMax);
};
Improve this answer

Comments

-1 

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() );

Improve this answer

2 Comments

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
-2

much shorter:

getWidth = function () {  
    return self.innerWidth ? self.innerWidth :  
            document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientWidth :  
            document.body ? document.body.clientWidth : 0;  
};

some here vote negative without any check

Improve this answer

1 Comment

Good answers (especially answers to old questions with many preexisting answers) should include some explanation, not just code.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.