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

При разработке интерфейсов для сайтов частенько приходиться пользоваться JavaScript. Конечно же это плохо, но в некоторых ситуация просто невозможно реализовать полностью все на CSS.

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

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

Я не буду говорить за всех, но мне это пригождается в интеграции с Textpattern`ом всевозможных галерей, слайдеров и т.д., где все написано на чистом JS. Вещи, которые жестко завязаны на JS встречаются редко, но все же встречаются, поэтому и появилась эта заметка.

Кстати, если есть другие вопросы по html, то лучше всего задавать их на специализированных форумах – http://www.cyberforum.ru/html/. Хоть это и форум сисадминов, да программистов, там все равно есть много информации по верстке и web-разработке в целом.

Определять можно 2 способами: JS или jQuery.

Определение ширины или высоты с помощью чистого JS

Это самый предпочтительный способ, так как движок JavaScript есть практически у каждого современного браузера. Даже мобильные браузеры научились работать с JS.

Конечно же есть вероятность того, что пользователь собственноручно отключить обработку JS в браузере, но, кажется мне, таких “странных людей” не так много, так как практически каждый сайт использует какие-нибудь решения, работающие на JS.

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

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

Вот бессмысленный пример использования:

<script type="text/javascript">
    alert(screen.width+'x'+screen.height);
</script>

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

document.body.clientWidth //Ширина браузера
document.body.clientHeight //Высота браузера

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

<script type="text/javascript">
    alert(document.body.clientWidth+'x'+document.body.clientHeight);
</script>

Определение размеров браузера с помощью jQuery

Лично я пользуюсь методом, который описан ниже. Этот метод работает только если у Вас на сайте ранее подключена библиотека jQuery. На всех сайтах, которые мне приходится делать эта библиотека является стандартом де`факто.

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

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

И в конце хотелось бы сказать, что если есть возможность обойтись без JS и jQuery вообще или частично, то именно так и нужно поступать.

Комментарии:

  1. naimjonn опубликовал комментарий 20 Январь 2014, 12:13 #

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

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

    | Ответить
    • itshaman опубликовал комментарий 20 Январь 2014, 17:59 #

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

      | Ответить
  2. Дмитрий опубликовал комментарий 3 Март 2014, 17:04 #

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

    | Ответить
  3. Виталий опубликовал комментарий 29 Март 2014, 13:20 #

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

    | Ответить
  4. Новичек опубликовал комментарий 19 Июль 2016, 13:04 #

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

    | Ответить
Имя
e-mail
Сайт
Текст комментария: