RealAdmin

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

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

В 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#
    Что же ты пугаешь людей с этим призраком.
    © REALADMIN.RU   2021 г.
    Страница сгенерирована: 0,1675 s | 6 mb.
    На каком уровне Вы играете в шахматы?
    О П Р О С