Определяем ширину/высоту экрана или окна браузера с помощью JS и на jQuery

При разработке интерфейсов частенько приходиться пользоваться JavaScript`ом. Раньше считалось, что использовть любые скрипты, которые исполняются на стороне пользователя – плохо и использование JS считалось «дурным тоном».

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

Где может пригодиться?

За всех не скажу, но определение размеров экрана или окна браузера, лично для меня, пригождается при внедрении в CMS всевозможных галерей, слайдеров и т.д.

На JS

Определение ширины или высоты монитора

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

Все же остается вероятность того, что пользователь собственноручно отключить обработку JS в браузере. В современном мире шансы равны 0,00001%.

В JS, чтобы определить размеры экрана, нужно использовать:

screen.width  // Ширина экрана
screen.height // Высота экрана

Ниже я привел работающий пример как можно узнать размеры экрана на JS:

See the Pen Определяем ширину/высоту экрана на JS by Ванька (@itshaman) on CodePen.

Определение ширины и высоты окна браузера

Если нужно позиционировать любые элементы на странице, то более правильным решением будет использовать не размеры экрана, а размеры окна браузера. В JS это делается так:

window.innerWidth  // Ширина браузера
window.innerHeight // Высота браузера

Соответственно вот пример использования:

See the Pen Определяем размеры окна браузера by Ванька (@itshaman) on CodePen.

Стоит учесть, что в примере ширина и высота окна – это размеры маленького окна справа на сервисе codepen. В «боевых» условиях будет отображаться реальный размер окна.

На jQuery

Если У Вас уже есть подключенная библиотека jQuery, то можно узнать размеры окна с помощью нее. Хоть уже jQuery и старичок, от которого все пытаются избавиться, его нередко можно встретить даже в современных CMS системах.

Определение размеров монитора на jQuery

Определить размер монитора на jQuery у меня не получилось. Если у Вас есть готовое решение, то просьба написать в комментариях.

Для определения ширины или высоты окна браузера

Чтобы задействовать для нашей задачи jQuery, необходимо использовать код:

$(window).width();  // Ширина браузера
$(window).height(); // Высота браузера

See the Pen Определяем ширину/высоту экрана на jQuery by Ванька (@itshaman) on CodePen.

Теги:

Комментарии

naimjonn, 20 января 2014 г. 12:13 #

Другого нельзя? кроме Alert? например с помощью get запроса отправить куда нибудь и использовать эти данных ?

Вообще то alert без смысленно его видит человек. Мне надо использовать эти данных(height:width) чтоб изменит какието элементи: if ($height>=600) { #code… } else { #code…}

Зюзгин Иван, 20 января 2014 г. 17:59 #

Я вроде и написал, что пример бессмысленный. Главное же возможность

Дмитрий, 3 марта 2014 г. 17:04 #

document.body.clientHeight возвращает 0 – почему? Пробовал в разных браузерах.

Виталий, 29 марта 2014 г. 13:20 #

То, что здесь написано – не работает, если изначально не указаны размеры. document.body.clientHeight выводит нулевое значение если окно браузера пустое не зависимо от размеров браузера. Например есть self.innerHeight, который выводит высоту окна, но почему то не везде работает.

Новичек, 19 июля 2016 г. 12:04 #

спасибо автору он дал наводную инфу а дальше можно посмотреть или в стандарте или здесь http://www.w3schools.com/jquery/css_height.asp

Зюзгин Иван, 8 декабря 2020 г. 18:09 #

Дмитрий: document.body.clientHeight возвращает 0 – почему? Пробовал в разных браузерах.

Я обновил статью и сейчас должно все работать как часы.