RealAdmin

Размер окна браузера в JavaScript

Размер окна браузера в JavaScript
Комментарии: 3

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

Текущие значения вашего браузера:

Ширина
document.body.clientWidth;
innerWidth;
outerWidth;
screen.availWidth.
screen.width;
Высота
document.body.clientHeight;
innerHeight;
outerHeight;
screen.availHeight.
screen.height;
ширина на javascript
  • document.body.clientWidth — ширина элемента body.
  • innerWidth — внутренняя рабочая часть браузера с сайтом.
  • outerWidth — размер с учётом полос прокрутки и рамок браузера.
  • screen.width — разрешение экрана по горизонтали.
  • screen.availWidth — доступная область эркана для окон. Не учитвает служебные панели операционной системы, например, панель задач в Windows.

К последним 3 переменным иногда добавляют «window», это не играет роли и только удлиняет синтаксис. Например, «window.screen.width».

Пример события для отслеживания изменения размеров окна браузера в реальном времени. Результаты выводятся в консоль браузера.

    window.addEventListener("resize", function() {
        console.log(innerWidth);
        console.log(innerHeight);
    }, false);

Высота экрана и окна

Аналогичные переменные для получения высоты в JS:

  • document.body.clientHeight;
  • innerHeight;
  • outerHeight;
  • screen.height;
  • screen.availHeight;

Наименованя переменных чувствительно к регистру букв.

Пример:

    console.log('Full screen height: ' + screen.height);
    console.log('Availible screen height: ' + screen.availHeight);

Высота и ширина на jQuery

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

  • $('body').width();
  • $(window).innerWidth();
  • $(window).outerWidth();

Пример на jQuery:

$(function(){
    // высота первого абзаца на сайте
    var height_first_p = $('p:first-child').height();

    // внутренняя ширина окна браузера
    var inner_width = $(window).innerWidth();

    // размеры с учетом полосы прокрутки
    var outer_width = $(window).outerWidth();
});
Темы:
Ещё интересное — 6
Комментарии —
  1. В больнице
    В больнице23 марта 2018, 23:15#
    Что же ты пугаешь людей с этим призраком.
    1. Lyusten Elder
      Lyusten Elder29 марта 2021, 12:38#
      Здесь есть ошибка — Высота: document.body.clientHeight; 5034 px

      И кстати обращение к body не всегда корректно возвращает результат, если он описывается в CSS.
      1. Andy Si29 марта 2021, 13:19#
        Спасибо за подсказку, это небольшой баг — связан с тем, что сначала измеряется высота страницы, а потом на страницу подгружается пару рекламных баннеров. И получается что после их подгрузки страница становится чуть выше, чем указано в статье :)

        По размерам body с CSS не сталкивался, но верю что бывают проблемы.
      © REALADMIN.RU   2021 г.
      Страница сгенерирована: 0,1641 s | 4 mb.
      На каком уровне Вы играете в шахматы?
      О П Р О С