RealAdmin.ru

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

JavaScript,jQuery
Категория: Кодинг
04 марта 2018 г. в 21:30

В 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);

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

Все приведённые переменные работают и с высотой. Во всех случаях просто заменяется в названии «width» на «height».

  • 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. avatar В больнице 23 марта 2018, 23:15 #
    Что же ты пугаешь людей с этим призраком.
    © REALADMIN.RU   2018 г.
    Страница сгенерирована: 0,2412 s | 4 mb.
    На каком уровне Вы играете в шахматы?
    О П Р О С
    Home Question Top