JavaScript - Получение Высоты Окна Браузера

Для получения размеров окна браузера вы можете использовать следующий код, основанный на примере с сайта http://www.howtocreate.co.uk/tutorials/javascript/browserwindow:

function alertSize() {
  var myWidth = 0, myHeight = 0;
  if (typeof(window.innerWidth) == 'number') {
    // Не IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
    // IE 6+ в режиме 'соответствия стандартам'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
    // Совместимость с IE 4
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  window.alert('Ширина = ' + myWidth);
  window.alert('Высота = ' + myHeight);
}

Таким образом, для современных браузеров вы используете innerHeight, для IE - documentElement.clientHeight, а для устаревших/квирк-сценариев - body.clientHeight.

Попробуйте использовать jQuery для получения высоты окна:

window_size = $(window).height();

Этот код возвращает текущую высоту окна браузера. Не забудьте подключить библиотеку jQuery перед использованием данного кода, если она еще не подключена.

Вы можете использовать window.innerHeight, чтобы получить высоту области просмотра (viewport) в текущем окне браузера. Это значение измеряется в пикселях и обновляется автоматически при изменении размера окна. Например, чтобы получить высоту, вы можете использовать следующий код:

const viewportHeight = window.innerHeight;
console.log(`Высота области просмотра: ${viewportHeight}px`);

Этот код выведет текущую высоту области просмотра в консоль. Если вам необходимо учитывать высоту при изменении размеров окна, вы можете размещать этот код в обработчике события resize.

Я предпочитаю делать это следующим образом, используя тернарный оператор для присваивания значений:

var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth;
var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;

Стоит отметить, что если вы выполните этот код в глобальном контексте, то с этого момента сможете использовать window.height и window.width.

По моему опыту, это работает в IE и других браузерах (тестировал только в IE11).

Решение очень компактное и, если я не ошибаюсь, эффективное.

Есть более простой способ, чем использовать множество условий if. Используйте оператор или (||).

function getBrowserDimensions() {
  return {
    width: (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth),
    height: (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight)
  };
}

var browser_dims = getBrowserDimensions();

alert("Ширина = " + browser_dims.width + "\nВысота = " + browser_dims.height);

Этот код возвращает размеры окна браузера, проверяя несколько свойств для получения актуальных значений ширины и высоты. Это делает код более компактным и читаемым.