How to get the browser viewport dimensions?

Asked 8/8, 2009 at 5:54 Answered 7/2, 2022 at 17:1

Solved javascript cross-browser viewport

1028

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:

Basel answered 8/8, 2009 at 5:54 Comment(4)

What i do is, set an element usually html to 100% height and get its height. Simple works everywhere. – Abut 18/10, 2014 at 18:49

@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. – Zackaryzacks 19/11, 2014 at 13:45

Also, you can use the W library, which handles cross-browser viewport detection ;) – Cyperaceous 29/4, 2016 at 13:51

Note that if your viewport is zoomed in, you will get lower results. – Bunce 7/9, 2022 at 9:23

1679

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`

equals CSS viewport width minus scrollbar width
matches @media (width) and @media (height) when there is no scrollbar
same as jQuery(window).width() which jQuery calls the browser viewport
available cross-browser
inaccurate if doctype is missing

Resources

Live outputs for various dimensions
verge uses cross-browser viewport techniques
actual uses matchMedia to obtain precise dimensions in any unit

Gerta answered 16/1, 2012 at 5:23 Comment(30)

Just wondering if the quirksmode link says clientWidth / clientHeight is a no-go in IE9 on mobile. Can you please clarify on that? Excellent answer by the way! Thanks! – Koehler 22/2, 2013 at 13:8

@01100001 I am not sure about IE9. You can test by comparing the values on responsejs.com/labs/dimensions - It is correct if it matches the @media breakpoint. See updated answer above too. – Gerta 22/2, 2013 at 22:31

What's the proper way to use verge.js? I tried this: http://pastebin.com/Qb6ucjGE, but it doesn't work. If possible, please take a look. – Koehler 22/2, 2013 at 23:3

@01100001 Replace $ with verge. If you want to integrate into jQuery then do jQuery.extend(verge). See: verge.airve.com/#static – Gerta 24/2, 2013 at 17:54

Oh, I missed that note in the doc. Didn't know using verge would be this easy! Thanks a lot! – Koehler 25/2, 2013 at 14:3

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. – Eliaseliason 9/5, 2013 at 7:44

@TzuryBarYochay Good point. Any valid HTML or XHTML doctype seems to suffice. – Gerta 19/5, 2013 at 16:31

I'm not happy with clientWidth/Height on mobile devices, really tripleodeon.com/wp-content/uploads/2011/12/table.html – Zackaryzacks 31/7, 2013 at 10:57

@ryanve: Nevermind, false alert. I was looking at it on mobile and ofc the widths are the same due to the overlay scrollbars. Do you happen to know of an alternative method for window.innerWidth? I'm trying to calculate the scrollbar width to solve / simplify https://mcmap.net/q/54302/-position-displacement-when-toggling-several-overflow-y-elements/89771. – Basel 7/5, 2014 at 18:32

@Dan: Could you explain that? – Basel 7/5, 2014 at 18:34

@AlixAxel, I think that the answer above does not work on mobile. I think that most of the developers want to get virtual pixels on Retina, not physical ones. – Zackaryzacks 13/5, 2014 at 17:50

Doesn't seem to work on Firefox mobile, I always get 980x480 px², regardless of zoom or orientation. – Thionic 18/9, 2014 at 9:32

-1 It's too difficult to understand what you are trying to say after that last edit. – Avoirdupois 7/10, 2014 at 13:52

unfortunately in Mobile Chrome on Android devices document.documentElement.clientHeight and window.innerHeight have the same value, wich is even different from window.screen.height window.screen.availHeight when adressbar is hidden because of digital controls (tested on nexus 5 with android lollipop ) – Skive 11/2, 2015 at 18:5

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. – Schaaff 14/4, 2015 at 15:8

Besides the iOS bug on older versions mentioned by Dan, there's also a weirdness on the current mobile Safari that window.innerWidth can in fact be larger than the actual (virtual-pixel-based) screen width, if there already is content in the DOM that is larger. In those situations, document.documentElement.clientHeight still returns the smaller correct viewport width. Which of course is bizarre and completely contrary to what one would expect. – Grapeshot 21/3, 2016 at 17:16

In Firefox, documentElement.clientHeight and documentElement.clientWidth, when called from within an SVG document - always returns 0 for both. In Chrome they return the correct values. – Hype 18/9, 2016 at 13:23

@YuvalA what do you mean from within an SVG document? – Gerta 18/9, 2016 at 18:7

@Gerta - Browsers can read/parse/display SVG documents, and Javascript can be used inside of them. – Hype 19/9, 2016 at 13:9

@Schaaff confirming, in a mobile version of Chrome this code returns wrong height. – Calliecalligraphy 22/4, 2018 at 20:0

@Schaaff @Calliecalligraphy Does the page you tested on have a DOCTYPE? DOCTYPE is required for document.documentElement.clientHeight to be accurate. Otherwise can you give some example numbers? I just checked in Chrome Windows desktop and Chrome iPhone and the .max technique still worked. Compare to actual("height", "px") from github.com/ryanve/actual#api – Gerta 25/4, 2018 at 22:50

On a side note, just gotta say, this answer could be grammatically cleaner. – Seychelles 29/8, 2018 at 15:57

Wouldn't it make more sense to do Min(clientHeight, innerHeight) || 0? – Monegasque 20/2, 2019 at 17:37

@Monegasque No due to support because Math.min(777, undefined) is NaN – Gerta 25/2, 2019 at 22:30

@Gerta well you can probably add some check for that. My point is that I think the proper thing is to try and get the minimum number that is not 0. That should avoid having the scrollbars calculated in, in different browsers. i.e. Min(Min(clientHeight || Infinity, innerHeight || Infinity) || 0) – Monegasque 26/2, 2019 at 10:7

different screen size variables/solutions live test: ryanve.com/lab/dimensions – Orlantha 4/6, 2019 at 11:34

In my testing, innerWidth seems to sometimes cause style recalculation, whereas clientWidth doesn't. Seems counter-intuitive, but I thought I'd mention it here anyway. – Slippery 30/7, 2020 at 3:8

The live test site is trashed - it reports "undefined" for all values on Chrome 87 – Yasmineyasu 15/1, 2021 at 14:39

@Gerta I'm late to the party here, but in answer to document.documentElement.clientHeight and ...Width seeming to be inaccurate, I'm testing on a page that does have a DOCTYPE, using Chrome Desktop with mobile emulation turned on, and in this scenario those numbers are wrong (significantly larger than they should be). The numbers returned by window.innerHeight and ...Width are accurate. Not sure why, and it's more difficult to test on real mobile so I'm not sure about there either.. – Squash 17/3, 2023 at 21:20

documentElement.clientHeight should be correct when the browser isn't in quirks mode according to the w3 standard. Normally the document won't be in quirks mode as long as a DOCTYPE is set, but there is questionable reference in a stack overflow post that this might not always be the case if there is malformed html. Sources: (1) w3.org/TR/2016/WD-cssom-view-1-20160317/… (found that link as a reference from (2) developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) (3) https://mcmap.net/q/54303/-what-is-quirks-mode – Jezabel 18/4, 2023 at 15:17

119

jQuery dimension functions

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

Baptize answered 8/8, 2009 at 6:1 Comment(4)

This doesn't gets viewport size, but overall document size. Try it. – Yirinec 9/8, 2013 at 19:34

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. – Blagoveshchensk 6/5, 2014 at 14:15

@AlejandroIglesias: Nope, I just tested it on this SO page. $(window).height(); returns 536, whereas $("html").height(); returns 10599 – Felicitous 14/1, 2016 at 16:33

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. – Caravaggio 1/6, 2017 at 16:56

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

innerHeight vs outerHeight

Sawyers answered 8/8, 2009 at 6:39 Comment(7)

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. – Homozygote 12/12, 2009 at 23:14

@CMS document.documentElement.clientWidth is more accurate and more widely supported than window.innerWidth – Gerta 16/1, 2012 at 5:24

@Gerta If by "more accurate" you mean "doesn't even remotely do the same thing" then yes :P – Bil 7/5, 2013 at 11:39

Firefox Beta? That's something belonged to the museum. – Melisma 5/10, 2014 at 1:8

@Bil In mobile Safari, document.documentElement.clientWidth gives me the viewport width while window.innerWidth gives me the document width. Yes, that way round. – Grapeshot 21/3, 2016 at 17:20

+1 for a simple, to the point, answer. Too many ppl write a thesis on the why when 80%+ of us just want to get it working and move on with our lives! :-) – Wille 18/7, 2018 at 18:38

Diagram appears broken – Hematite 21/7, 2022 at 11:3

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;

Dar answered 8/8, 2009 at 6:20 Comment(2)

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 – Homozygote 12/12, 2009 at 23:13

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. – Sair 7/11, 2014 at 9:55

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>

Algorithm answered 30/5, 2014 at 9:7 Comment(3)

note that stackoverflow's use of an iframe surrounding the code snippet messes up the result – Fissure 11/5, 2019 at 7:43

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" /> – Historicism 15/11, 2020 at 22:2

@Historicism I wish I could give your comment 10 upvotes instead of one. That meta tag is a lifesaver. – Hydrophobia 24/11, 2021 at 3:37

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

Smokeless answered 12/8, 2013 at 19:12 Comment(0)

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.

Haematogenous answered 17/8, 2013 at 1:18 Comment(2)

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/… ? – Haematogenous 13/5, 2014 at 18:31

1) When talking about high-DPI displays I mean virtual pixels explained here: https://mcmap.net/q/54304/-iphone-5-screen-size-vs-css-media-query-duplicate. 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 – Zackaryzacks 13/5, 2014 at 19:41

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.

Zackaryzacks answered 13/5, 2014 at 17:12 Comment(0)

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

Rashid answered 31/12, 2012 at 8:1 Comment(0)

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

Isomerous answered 16/2, 2013 at 21:31 Comment(1)

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 – Zackaryzacks 13/5, 2014 at 17:4

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

Nephelinite answered 11/10, 2021 at 18:18 Comment(3)

Not supported by IE (any version). – Bellyband 12/1, 2022 at 20:15

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. – Rotunda 30/9, 2022 at 13:46

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 @Bellyband – Nephelinite 5/10, 2022 at 2:43

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

Ala answered 7/2, 2022 at 17:1 Comment(0)

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.

Hittite answered 5/5, 2013 at 21:16 Comment(2)

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". – Zackaryzacks 13/5, 2014 at 17:11

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. – Melisma 5/10, 2014 at 1:11

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

Salsify answered 24/2, 2015 at 11:57 Comment(0)

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/

Inborn answered 11/9, 2020 at 16:36 Comment(1)

totally overkill – Febrific 25/1, 2021 at 3:52

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.

Gladstone answered 28/10, 2020 at 19:35 Comment(0)

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>

Tideway answered 15/5, 2021 at 6:38 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

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

window.innerWidth and window.innerHeight

document.documentElement.clientWidth and .clientHeight