Get the browser viewport dimensions with JavaScript

问题

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:

回答1:

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

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); 

window.innerWidth and .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

回答2:

jQuery dimension functions

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

回答3:

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

回答4:

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; 

回答5:

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

回答6:

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.

回答7:

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>

回答8:

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

回答9:

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

回答10:

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.

回答11:

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.

回答12:

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

来源：https://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript