Web-it-blog/06.07.17

Определяем размеры окна с помощью JavaScript

Часто приходиться вычислять размеры экрана и обычно для этого я использую JavaScript. Так что, в этой статье, я решил с вами поделиться одним из методов как этого можно добиться.

Размеры видимой области части окна.

Для того, чтобы вычислить размеры видимой области части окна браузера, надо воспользоваться объектом window:

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

var  windowHeight = window.innerHeight,
	 windowWidth = window.innerWidth;

Второй способ вычисляет размеры видимой области части окна браузера без учета полосы прокрутки.

var  windowHeight = document.documentElement.clientHeight,
	 windowWidth = document.documentElement.clientWidth;

Для корректного отображения размеров во всех браузерах можно воспользоваться оператором || (ИЛИ)

var  windowHeight = window.innerHeight || document.documentElement.clientHeight,
	 windowWidth = window.innerWidth || document.documentElement.clientWidth;

Также, в целях кроссбраузерности, можно использовать другой метод: мы просто выбираем наибольший размер из этих значений.

var  windowHeight = Math.max(window.innerHeight, document.documentElement.clientHeight),
	 windowWidth = Math.max(window.innerWidth, document.documentElement.clientWidth);

Размеры экрана.

Для подсчета размеров всего экрана можно воспользоваться объектом screen.

var  screenHeight = screen.height,
	 screenWidth = screen.width;

Помимо свойств height и width, у объекта screen есть дополнительные свойства availHeight и availWidth. Они вычисляют высоту и ширину, которое может занять окно браузера.

var  screenHeight = screen.availHeight,
	 screenWidth = screen.availWidth;

Пересчет размеров окна.

Следует иметь в виду тот факт, что относительные размеры высоты и ширины окна не будут всегда постоянными. Если размер экрана будет изменяться(уменьшаться или увеличиваться), или поворачиваться(на планшетах или мобильных устройств), то и эти значения будут меняться.

Поэтому, если вы хотите чтобы размеры были правильными, лучше всего будет сначала объявить переменные(т.е. сделать их глобальными), затем их поместить в функцию, где этим переменным присвоить результаты вычислений, и вызывать уже функцию при загрузке страницы, при изменении размеров страницы и при повороте экрана.

var  windowHeight, windowWidth, screenHeight, screenWidth;

function calcDimensionScreen( ) {
	windowHeight = Math.max(window.innerHeight, document.documentElement.clientHeight);
	windowWidth = Math.max(window.innerWidth, document.documentElement.clientWidth);
	screenHeight = screen.height;
	screenWidth = screen.width;
}

calcDimensionScreen( );
window.addEventListener("resize", calcDimensionScreen( ));
window.addEventListener("orientationchange", calcDimensionScreen( ));