Почему не работает код при смене ориентации экрана?

Question

[fgehte]

Добрый день! Есть проблема в обновление кода при смене ориентации экрана. Для сетки с изображениями подключил либу Masonry js, вроде все работает если после ресайза обновлять страницу, но если сменить ориентацию экрана то код не подстраивается под него. В чем может быть проблема?

import Masonry from 'masonry-layout';

const masonryContainer = document.querySelector('.grid');
let gapMasonry = 0;

if (masonryContainer) {
  gapMasonry = parseInt(getComputedStyle(masonryContainer).getPropertyValue('--column-gap'));
}

function casesMasonry() {
  const msnry = new Masonry(masonryContainer, {
    itemSelector: '.grid__item',
    columnWidth: '.grid__item',
    gutter: gapMasonry,
    horizontalOrder: true,
    percentPosition: true,
    transitionDuration: 0,
    fitWidth: true,
  });
}

const initMasonry = () => {
  window.addEventListener('load', () => {
    casesMasonry();

    window.addEventListener('orientationchange', function () {
      casesMasonry();
    });
  });
};

export {initMasonry};

Comments

[Вадим]

А Вы прямо на мобильном устройстве протестировали?

[fgehte]

Вадим, Нет) В коде вы явных ошибок не увидели?

[Вадим]

fgehte, Мой глаз не реал тайм компилятор :-)
Выглядит нормально.
Событие orientationchange не поддерживается на десктопных браузерах, даже в режиме эмуляции.
https://developer.mozilla.org/en-US/docs/Web/API/W...

Можете попробовать для тестирования на десктопе заменить orientationchange на resize

[fgehte]

Вадим, а не подскажите, как тестировать на разных устройствах, не заливая проект на хост? Раньше на телефоне вбивал локальный адрес разработки(при условии, что к одному wifi подключен) и работало все ок. Сейчас не работает, страница постоянно грузиться, но так и не загружается, в чем проблема?

[Вадим]

fgehte, Слишком много всего, что может на это влиять.
Сейчас поковыряюсь в своих ответах, где-то я уже отвечал на подобное

[Вадим]

fgehte, Как открыть localhost на другом компьютере в той же сети?

[fgehte]

Вадим, Спасибо, попробую.

Answer 1

[baskovsky.ru]

Попробуйте проверять ориентацию экрана через следующий код:

function isLandscape() {
    if (window.matchMedia('(orientation: landscape)').matches) {
        return true;
    } else if (window.matchMedia('(orientation: portrait)').matches) {
        return false;
    }
    return true;
}