1061

I want to provide my visitors the ability to see images in high quality, is there any way I can detect the window size?

Or better yet, the viewport size of the browser with JavaScript? See green area here:

Improve this question
4
  • 17
    What i do is, set an element usually html to 100% height and get its height. Simple works everywhere. Commented Oct 18, 2014 at 18:49
  • 1
    @MuhammadUmer good catch! If you get frustrated getting the dimensions (and you will, on mobile phones without jQuery), you can getComputedStyle of the expanded html tag. Commented Nov 19, 2014 at 13:45
  • Also, you can use the W library, which handles cross-browser viewport detection ;) Commented Apr 29, 2016 at 13:51
  • Note that if your viewport is zoomed in, you will get lower results. Commented Sep 7, 2022 at 9:23

17 Answers 17

Reset to default
1724

Cross-browser @media (width) and @media (height) values 

let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

window.innerWidth and window.innerHeight

  • gets CSS viewport @media (width) and @media (height) which include scrollbars
  • initial-scale and zoom variations may cause mobile values to wrongly scale down to what PPK calls the visual viewport and be smaller than the @media values
  • zoom may cause values to be 1px off due to native rounding
  • undefined in IE8-

document.documentElement.clientWidth and .clientHeight

Resources

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

31 Comments

@01100001 Replace $ with verge. If you want to integrate into jQuery then do jQuery.extend(verge). See: verge.airve.com/#static
Just wanted to mention that in IE8 (and perhaps others) you must have the <!DOCTYPE html> at the top of the page in order for the code to work.
I'm not happy with clientWidth/Height on mobile devices, really tripleodeon.com/wp-content/uploads/2011/12/table.html
Unless I'm missing something, this answer is wrong. In Chrome, at least, document.documentElement.clientHeight returns the page height, while window.innerHeight returns the viewport height. Big difference.
different screen size variables/solutions live test: ryanve.com/lab/dimensions
|
119

jQuery dimension functions

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

Improve this answer

4 Comments

This doesn't gets viewport size, but overall document size. Try it.
For browsers that display their addon toolbars as HTML with fixed postitionning, this solution is not working, especially if you want to use in your code top positionning and percentages.
@AlejandroIglesias: Nope, I just tested it on this SO page. $(window).height(); returns 536, whereas $("html").height(); returns 10599
Warning these dimensions do not include scrollbars (which have different sizes in different browsers and platforms) and therefore they will not match up with css media queries other answers here do however solve this problem.
92

You can use the window.innerWidth and window.innerHeight properties.

innerHeight vs outerHeight

Improve this answer

7 Comments

Even though this doesn't work in IE +1 for diagram :D. For a question like this, it should be a crime not to have more of these.
@CMS document.documentElement.clientWidth is more accurate and more widely supported than window.innerWidth
@ryanve If by "more accurate" you mean "doesn't even remotely do the same thing" then yes :P
Firefox Beta? That's something belonged to the museum.
@boxed In mobile Safari, document.documentElement.clientWidth gives me the viewport width while window.innerWidth gives me the document width. Yes, that way round.
|
38

If you aren't using jQuery, it gets ugly. Here's a snippet that should work on all new browsers. The behavior is different in Quirks mode and standards mode in IE. This takes care of it.

var elem = (document.compatMode === "CSS1Compat") ? 
    document.documentElement :
    document.body;

var height = elem.clientHeight;
var width = elem.clientWidth;
Improve this answer

2 Comments

Doesn't this give you the height of the page, not the viewport? That's what this page seems to indicate: developer.mozilla.org/en/DOM/element.clientHeight
You are using clientHeight on the document.documentElement element, which will give you the viewport size. To get the document size, you would need to do document.body.clientHeight. As Chetan explains, this behaviour applies to the modern browsers. It is easy to test. Just open a console and type document.documentElement.clientHeight on several open tabs.
24

I looked and found a cross browser way:

function myFunction(){
  if(window.innerWidth !== undefined && window.innerHeight !== undefined) { 
    var w = window.innerWidth;
    var h = window.innerHeight;
  } else {  
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
  }
  var txt = "Page size: width=" + w + ", height=" + h;
  document.getElementById("demo").innerHTML = txt;
}
<!DOCTYPE html>
<html>
  <body onresize="myFunction()" onload="myFunction()">
   <p>
    Try to resize the page.
   </p>
   <p id="demo">
    &nbsp;
   </p>
  </body>
</html>

Improve this answer

3 Comments

note that stackoverflow's use of an iframe surrounding the code snippet messes up the result
Every so often I come across an answer that is a direct hit in terms of a solution and understanding how it all works. I wished I could give this 10 upvotes instead of just one. To make this work interactively using the F12 mobile simulator, I found this tag is needed in the page <head> <meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />
@pghcpa I wish I could give your comment 10 upvotes instead of one. That meta tag is a lifesaver.
18

I know this has an acceptable answer, but I ran into a situation where clientWidth didn't work, as iPhone (at least mine) returned 980, not 320, so I used window.screen.width. I was working on existing site, being made "responsive" and needed to force larger browsers to use a different meta-viewport.

Hope this helps someone, it may not be perfect, but it works in my testing on iOs and Android. 

//sweet hack to set meta viewport for desktop sites squeezing down to mobile that are big and have a fixed width 
  //first see if they have window.screen.width avail
  (function() {
    if (window.screen.width)
    {
      var setViewport = {
        //smaller devices
        phone: 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no',
        //bigger ones, be sure to set width to the needed and likely hardcoded width of your site at large breakpoints  
        other: 'width=1045,user-scalable=yes',
        //current browser width
        widthDevice: window.screen.width,
        //your css breakpoint for mobile, etc. non-mobile first
        widthMin: 560,
        //add the tag based on above vars and environment 
        setMeta: function () {
          var params = (this.widthDevice <= this.widthMin) ? this.phone : this.other; 
          var head = document.getElementsByTagName("head")[0];
          var viewport = document.createElement('meta');
          viewport.setAttribute('name','viewport');
          viewport.setAttribute('content',params);
          head.appendChild(viewport);
        }
      }
      //call it 
      setViewport.setMeta();
    }
  }).call(this);
Improve this answer

Comments

14

I was able to find a definitive answer in JavaScript: The Definitive Guide, 6th Edition by O'Reilly, p. 391:

This solution works even in Quirks mode, while ryanve and ScottEvernden's current solution do not.

function getViewportSize(w) {

    // Use the specified window or the current window if no argument
    w = w || window;

    // This works for all browsers except IE8 and before
    if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight };

    // For IE (or any browser) in Standards mode
    var d = w.document;
    if (document.compatMode == "CSS1Compat")
        return { w: d.documentElement.clientWidth,
           h: d.documentElement.clientHeight };

    // For browsers in Quirks mode
    return { w: d.body.clientWidth, h: d.body.clientHeight };

}

except for the fact that I wonder why the line if (document.compatMode == "CSS1Compat") is not if (d.compatMode == "CSS1Compat"), everything looks good.

Improve this answer

2 Comments

are you talking about Retina display or Landscape vs Portrait or the meta viewport tag? You don't mean virtual pixels as in snowdragonledhk.com/… ?
1) When talking about high-DPI displays I mean virtual pixels explained here: stackoverflow.com/a/14325619/139361. Every iPhone screen is exactly 320 virtual pixels wide. 2) I say that: a)documentElement.clientWidth does not respond on device orientation change on iOS. b) displays physical pixels count (practically useless) instead of virtual pixels
14

If you are looking for non-jQuery solution that gives correct values in virtual pixels on mobile, and you think that plain window.innerHeight or document.documentElement.clientHeight can solve your problem, please study this link first: https://tripleodeon.com/assets/2011/12/table.html

The developer has done good testing that reveals the problem: you can get unexpected values for Android/iOS, landscape/portrait, normal/high density displays.

My current answer is not silver bullet yet (//todo), but rather a warning to those who are going to quickly copy-paste any given solution from this thread into production code.

I was looking for page width in virtual pixels on mobile, and I've found the only working code is (unexpectedly!) window.outerWidth. I will later examine this table for correct solution giving height excluding navigation bar, when I have time.

Improve this answer

Comments

12

This code is from http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

NB : to read the width, use console.log('viewport width'+viewport().width);

Improve this answer

Comments

12

There is a difference between window.innerHeight and document.documentElement.clientHeight. The first includes the height of the horizontal scrollbar.

Improve this answer

1 Comment

Did you test your answer across OSes, on Retina displays and in landscape/portrait modes? This link covers rather outdated systems, but it proves that your code does not work: tripleodeon.com/wp-content/uploads/2011/12/table.html
11

For detect the Size dynamically

You can do it In Native away, without Jquery or extras

console.log('height default :'+window.visualViewport.height)
console.log('width default :'+window.visualViewport.width)

window.addEventListener('resize',(e)=>{         
      console.log( `width: ${e.target.visualViewport.width}px`);
      console.log( `height: ${e.target.visualViewport.height}px`);
 });

Improve this answer

3 Comments

Not supported by IE (any version).
IE's not supported by Microsoft (any version). It's safe to put it in a box and bury it at the end of the garden now.
but in the Original ask are using Firefox, Now I ask, who uses IE's? oberlo.com/statistics/browser-market-share , (ask Original) How to get the browser viewport dimensions? They never specified using IE @Indev
11

It should be

let vw = document.documentElement.clientWidth;
let vh = document.documentElement.clientHeight;

understand viewport: https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts

shorthand for link above: viewport.moz.one

I've built a site for testing on devices: https://vp.moz.one

Improve this answer

Comments

8

A solution that would conform to W3C standards would be to create a transparent div (for example dynamically with JavaScript), set its width and height to 100vw/100vh (Viewport units) and then get its offsetWidth and offsetHeight. After that, the element can be removed again. This will not work in older browsers because the viewport units are relatively new, but if you don't care about them but about (soon-to-be) standards instead, you could definitely go this way:

var objNode = document.createElement("div");
objNode.style.width  = "100vw";
objNode.style.height = "100vh";
document.body.appendChild(objNode);
var intViewportWidth  = objNode.offsetWidth;
var intViewportHeight = objNode.offsetHeight;
document.body.removeChild(objNode);

Of course, you could also set objNode.style.position = "fixed" and then use 100% as width/height - this should have the same effect and improve compatibility to some extent. Also, setting position to fixed might be a good idea in general, because otherwise the div will be invisible but consume some space, which will lead to scrollbars appearing etc.

Improve this answer

2 Comments

Unfortunately, the reality completely destroys your "W3C - standards solution": 1) caniuse.com/viewport-units , 2) caniuse.com/#feat=css-fixed. What developers need is the solution that works, not "should theoretically work".
If we can rely on the standards then we don't even need all those cross browser solutions. A solution that replies on the spec is not a solution.
5

This is the way I do it, I tried it in IE 8 -> 10, FF 35, Chrome 40, it will work very smooth in all modern browsers (as window.innerWidth is defined) and in IE 8 (with no window.innerWidth) it works smooth as well, any issue (like flashing because of overflow: "hidden"), please report it. I'm not really interested on the viewport height as I made this function just to workaround some responsive tools, but it might be implemented. Hope it helps, I appreciate comments and suggestions.

function viewportWidth () {
  if (window.innerWidth) return window.innerWidth;
  var
  doc = document,
  html = doc && doc.documentElement,
  body = doc && (doc.body || doc.getElementsByTagName("body")[0]),
  getWidth = function (elm) {
    if (!elm) return 0;
    var setOverflow = function (style, value) {
      var oldValue = style.overflow;
      style.overflow = value;
      return oldValue || "";
    }, style = elm.style, oldValue = setOverflow(style, "hidden"), width = elm.clientWidth || 0;
    setOverflow(style, oldValue);
    return width;
  };
  return Math.max(
    getWidth(html),
    getWidth(body)
  );
}
Improve this answer

Comments

4

If you are using React, then with latest version of react hooks, you could use this.

// Usage
function App() {
   const size = useWindowSize();

   return (
     <div>
       {size.width}px / {size.height}px
     </div>
   );
 }

https://usehooks.com/useWindowSize/

Improve this answer

1 Comment

totally overkill
2

you can use window.addEventListener('resize' , yourfunction); it will runs yourfunction when the window resizes. when you use window.innerWidth or document.documentElement.clientWidth it is read only. you can use if statement in yourfunction and make it better.

Improve this answer

Comments

2

You can simply use the JavaScript window.matchMedia() method to detect a mobile device based on the CSS media query. This is the best and most reliable way to detect mobile devices.

The following example will show you how this method actually works:

<script>
$(document).ready(function(){
    if(window.matchMedia("(max-width: 767px)").matches){
        // The viewport is less than 768 pixels wide
        alert("This is a mobile device.");
    } else{
        // The viewport is at least 768 pixels wide
        alert("This is a tablet or desktop.");
    }
});
</script>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.