Использование размера окна в JavaScript

Экосистеме современных устройств требуются веб-страницы, которые плавно изменяют размер и положение элементов на экране в зависимости от размера экрана — другими словами, адаптивные веб-страницы. CSS предлагает отличный инструмент для создания адаптивных веб-страниц: медиа-запросы. Если вы не знакомы с CSS, в приведенном ниже примере показан медиа-запрос, который добавляет стиль к определенным элементам на странице, когда ширина экрана составляет не менее 1024 пикселей.

@media screen and (min-width: 1024px) {
    #main-content {
        min-height:25vh;
        display:flex!important;
        flex-wrap:wrap!important;
        align-content:space-around!important;
    }

    #main-content h1, #main-content p, #main-content div {
        width:100%!important;
    }

}

Это решение работает, когда вы управляете таблицей стилей CSS, но что, если вы используете структуру CSS, такую ​​как Bootstrap или Bulma? Что делать, если вам нужно что-то другое, кроме изменения стиля, например, вызов функции или изменение значения переменной в зависимости от размера экрана? В этом посте рассматриваются две опции, доступные в JavaScript: свойство window.innerWidth и событие onresize.

1. окно.innerWidth

Многие CSS-фреймворки работают, применяя стили и позиционирование к элементу на основе класса этого элемента. Эти фреймворки обычно имеют встроенную отзывчивость, но детали дизайна вашей страницы могут потребовать некоторых конкретных изменений стиля, положения или видимости элемента, помимо встроенных свойств, связанных с конкретным классом в используемом вами фреймворке. Чтобы получить желаемый эффект, вам может потребоваться назначить элементу другой класс в зависимости от размера окна.

Точно так же вы можете захотеть отобразить больше элементов на экране рабочего стола, чем на экране телефона. Свойство window.innerWidth облегчает эти операции. В приведенном ниже примере кода показано применение классов к элементам и присвоение значения переменной в зависимости от размера окна (в данном случае, если окно имеет ширину не менее 1024 пикселей).

if (window.innerWidth >= 1024) {
    document.getElementById("bookshelf").classList.add("mx-0");
    document.getElementById("library").classList.remove("py-1");
    document.getElementById("book").setAttribute("class", "mx-0");
    numBooks = 9;
}

Свойство window.innerWidth хорошо работает, если вам нужно определить размер окна в определенный момент времени, например, при первой загрузке страницы или при выполнении функции. В приведенном выше примере, если страница отображается на мобильном устройстве, никаких изменений класса не произойдет, и значение переменной numBooks не изменится. Но на большом экране это произойдет. Но что, если окно изначально имеет определенный размер, а затем изменяется? Если приведенный выше код уже запущен, ничего не изменится.

2. изменить размер

Событие onresize может запускать некоторый код в ответ на изменение размера окна. Как и в случае любого события JavaScript, существует несколько способов присоединения прослушивателя событий к объекту (см. ниже).

// Using the onresize property of an object:
window.onresize = function() {};

// Using the addEventListener() method:
window.addEventListener("resize", myFunction);

Конечно, у этого подхода есть два ограничения:

1. Событие onresize по своей сути не заботится о фактическом размере экрана, а только о том, что он изменился.
2. Событие onresize срабатывает только при изменении размера объекта (в данном случае окна). Если пользователь загружает страницу на мобильное устройство или рабочий стол, а размер окна не меняется, программа по-прежнему не имеет информации о том, что она должна делать в зависимости от размера окна.

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

Оба и

Чтобы решить эту дилемму, подумайте об этих параметрах — свойстве window.innerWidth и событии onresize — не как об одном или о выборе, а как о том и другом, и о предложении, как о двух ударах в боксе:

1. Начните с условного оператора, который проверяет свойство window.innerWidth и предпринимает соответствующие действия при загрузке страницы.
2. Добавьте прослушиватель событий onresize, который проверяет свойство window.innerWidth и предпринимает соответствующие действия при каждом изменении размера окна.

Благодаря сочетанию свойства window.innerWidth и прослушивателя событий onresize у вас есть возможность сделать ваш код JavaScript отзывчивым.