Find the Exact Height and Width of the Viewport in a Cross-Browser Way (No Prototype/Jquery)

Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery)

You might try this:

function getViewport() {

 var viewPortWidth;
 var viewPortHeight;

 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 if (typeof window.innerWidth != 'undefined') {
   viewPortWidth = window.innerWidth,
   viewPortHeight = window.innerHeight
 }

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 else if (typeof document.documentElement != 'undefined'
 && typeof document.documentElement.clientWidth !=
 'undefined' && document.documentElement.clientWidth != 0) {
    viewPortWidth = document.documentElement.clientWidth,
    viewPortHeight = document.documentElement.clientHeight
 }

 // older versions of IE
 else {
   viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
   viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
 }
 return [viewPortWidth, viewPortHeight];
}

( http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ )

However, it is not even possible to get the viewport information in all browsers (e.g. IE6 in quirks mode). But the above script should do a good job :-)

How to get the browser viewport dimensions?

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

const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
const 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

Browser size (width and height)

// first get the size from the window
// if that didn't work, get it from the body
var size = {
  width: window.innerWidth || document.body.clientWidth,
  height: window.innerHeight || document.body.clientHeight
}

How to get the browser viewport dimensions?

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

const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
const 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

---

Related Topics