Определяем ширину/высоту экрана или окна браузера с помощью 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.01.2014 12:13 #

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

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

Зюзгин Иван, 20.01.2014 17:59 #

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

Дмитрий, 03.03.2014 17:04 #

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

Виталий, 29.03.2014 13:20 #

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

Новичек, 19.07.2016 12:04 #

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

Зюзгин Иван, 08.12.2020 18:09 #

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

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

Алекс, 20.05.2021 14:09 #

А не проще нативно получить через Javascript все эти данные без JQuery. Что за маразм?

Зюзгин Иван, 01.06.2021 23:17 #

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






Комментарии
Интересное