Получите доступный размер окна браузера (clientHeight / clientWidth) в разных браузерах

Question

Мне нужен метод получения доступного размера окна для нескольких браузеров без с использованием jQuery / Mootools / любых сторонних библиотечных зависимостей. Я провел небольшое исследование по этому вопросу, но половина вещей, с которыми я столкнулся, говорят о Netscape Navigator ...

Просто интересно, есть ли у кого-то более недавний совет.

Answer 1

использование

var width = getWindowSize().width;

код

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

Примечание. Размеры не могут быть точно определены до окончания загрузки документа.

из comp.lang.javascript FAQ

Answer 2

Для современных браузеров:

document.documentElement.clientHeight

- все, что вам нужно.

Answer 3

Это не идеальное решение, но оно легкое и подходит для большинства целей:

var WX,WY;
if( window.innerWidth )
{
    WX = window.innerWidth;
    WY = window.innerHeight;
} else {
    WX = document.body.clientWidth;
    WY = document.body.clientHeight;
}