Clientheight/Clientwidth Returning Different Values on Different Browsers

clientHeight/clientWidth returning different values on different browsers

This has to do with the browser's box model. Use something like jQuery or another JavaScript abstraction library to normalize the DOM model.

document.documentElement.clientWidth - returns wrong value

MDN states that

The Element.clientWidth property is zero for inline elements and elements with no CSS; otherwise, it's the inner width of an element in pixels. It includes padding but excludes borders, margins, and vertical scrollbars (if present).

and I see a scrollbar on your screenshot. Maybe that is the reason?

Get the available browser window size (clientHeight/clientWidth) consistently across multiple browsers

usage

var width = getWindowSize().width;

code

var getWindowSize = (function() {
  var docEl = document.documentElement,
      IS_BODY_ACTING_ROOT = docEl && docEl.clientHeight === 0;

  // Used to feature test Opera returning wrong values 
  // for documentElement.clientHeight. 
  function isDocumentElementHeightOff () { 
      var d = document,
          div = d.createElement('div');
      div.style.height = "2500px";
      d.body.insertBefore(div, d.body.firstChild);
      var r = d.documentElement.clientHeight > 2400;
      d.body.removeChild(div);
      return r;
  }

  if (typeof document.clientWidth == "number") {
     return function () {
       return { width: document.clientWidth, height: document.clientHeight };
     };
  } else if (IS_BODY_ACTING_ROOT || isDocumentElementHeightOff()) {
      var b = document.body;
      return function () {
        return { width: b.clientWidth, height: b.clientHeight };
      };
  } else {
      return function () {
        return { width: docEl.clientWidth, height: docEl.clientHeight };
      };
  }
})();

Note: The dimensions cannot be determined accurately until after the document has finished loading.

from comp.lang.javascript FAQ

IE11 has different clientWidth and clientHeight than all other browsers

I figured it out with the help of this comment section https://github.com/philipwalton/flexbugs/issues/239

Apparently IE11 uses the default align-items setting, which is stretch. Explicitly setting the following style fixes it

.modules-widget-thumbnail {
    align-items: center;
}

Understand which viewport is returned from document.documentElement.clientWidth/Height, and difference with window.innerHeight/innerWidth

The CSSOM View spec defines both window.innerHeight/Width and document.documentElement.clientHeight/Width in terms of the same viewport, just differing in whether the scrollbars are included or not, so they should always change together.

Which notional viewport gets used is not defined there though. Because it is formally defined by a standard, I think we can take it that it uses the actual viewport as described in the CSS Device Adaptation spec.

Why document.documentElement.clientHeight is different from site to site?

The results are in CSS pixels. Judging by the screenshots you have different zoom settings for the pages, which means the viewport height and width are different numbers of CSS pixels.

Note that the aspect ratio for both pages is the same 3.16:1.

---

Related Topics