JS для определения ширины и высоты браузера работает в Chrome и Safari, но не в IE9 или FF9

Question

Есть ли причина, по которой этот код будет работать в Safari и Chrome, но не в IE или FF?

JS

function load(){
    w.value = window.outerWidth;
    h.value = window.outerHeight;
}

HTML

<input name="h" id="h" type="hidden" value="" />
<input name="w" id="w" type="hidden" value="" />

Нажмите здесь, чтобы получить исходный код всей страницы

Заранее спасибо за помощь.

Редактировать: я понял, что случилось. Следующее должно было быть добавлено к функции загрузки

var width = document.getElementById("w");
var height = document.getElementById("h");
width.value = window.outerWidth;
height.value = window.outerHeight;

Answer 1

Internet Explorer использует различные свойства для хранения размера окна. В Internet Explorer clientWidth / Height - это размер внутреннего окна (вычтите пиксели, используемые полосой прокрутки, меню и т. Д.), Поэтому попробуйте

function load(){
  if(window.outerHeight){
      w.value = window.outerWidth;
      h.value = window.outerHeight;
  }
  else {
      w.value = document.body.clientWidth;
      h.value = document.body.clientHeight; 
  }
}

Answer 2

Если вы используете jQuery, тогда я предлагаю использовать .width() и .height(), потому что они будут работать в разных браузерах.window.outerWidth не поддерживается в IE 8 и ниже.

Вот несколько хороших документов для window.outerWidth: https://developer.mozilla.org/en/DOM/window.outerWidth

Использование .width() и .height() вернет единицуменьшее число (то есть в пикселях), если вы хотите получить точный набор высоты / ширины (включая px или em), тогда вы можете использовать .css('width') и .css('height').

Answer 3

Используйте методы jQuery, которые поддерживают почти все браузеры.

function load(){
    w.value = $(window).width();
    h.value = $(window).height();
}

Ссылка: width () , height ()