Praca z RWD

Zdarzenie resize

Przy pracy z różnymi urządzeniami bardzo często chcemy sprawdzać rozdzielczość urządzenia.

Jednym z najprostszych sposobów reakcji na zmianę rozmiaru ekranu przeglądarki, jest podpięcie się pod zdarzenie resize obiektu window:


window.addEventListener("resize", e => {
    console.log(window);
    console.log(`${window.innerWidth} x ${window.innerHeight}`);
});

Zdarzenie to najczęściej zastosujemy w sytuacjach, gdy chcemy wykonać jakiś skrypt reagując na zmianę rozmiarów okna, ale równocześnie gdy reakcja taka powinna być dynamiczna.


const banner = document.querySelector("#banner");

//po wejściu na stronę
banner.style.height = window.innerHeight + "px";

//i po zmianie rozmiarów okna
window.addEventListener("resize", e => {
    banner.style.height = window.innerHeight + "px";
});

Gdy podepniesz się pod zdarzenie resize, zauważysz w konsoli podczas zmiany rozmiarów okna, że zdarzenie to jest odpalane bardzo, bardzo często. W wielu przypadkach nie powinno to być raczej problemem, ale przy bardziej skomplikowanych obliczeniach trzeba uważać i w razie konieczności sięgnąć po inne techniki takie jak debounce.

matchMedia

Kolejnym sposobem na reagowanie na zmianę mediów (w tym rozmiarów okna) jest skorzystanie ze specjalnie przeznaczonego do tego celu obiektu window.matchMedia(mediaQuery)


const media = window.matchMedia("(min-width: 768px)");

if (media.matches) {
    console.log("Wersja na desktopy");
} else {
    console.log("Wersja mobilna");
}

Zaletą tego rozwiązania jest to, że podane media mogą być tak samo precyzyjne jak te z CSS. Nie musimy się więc ograniczać do rozmiaru okna, ale też możemy sprawdzić inne media.

W przeciwieństwie do zdarzenia resize matchMedia nie jest odpalany wiele razy, a tylko w momencie gdy zachodzi test podany w nawiasach.

Powyższy kod zostanie odpalony jeden raz - tuż po wywołaniu (najczęściej przy wejściu na stronę).

Żeby sprawdzanie nasłuchiwało kolejnych zmian, musimy do niego takie nasłuchiwanie podpiąć:


function testMedia(media) {
    if (media.matches) {
        console.log("Wersja na desktopy");
    } else {
        console.log("Wersja mobilna");
    }
}

const media = window.matchMedia("(min-width: 768px)");

//po wejściu na stronę
testMedia(media);

//nasłuchujemy zmian
media.addEventListener("change", testMedia);

Dla machMedia istnieją też dwie bardzo podobne funkcje, które służą do podpinania nasłuchiwania. Mowa o addListener i removeListener.


    media.addListener(media => { ... });
    media.removeListener(media => { ... });

Obie funkcje nie są już zalecane na rzecz powyżej pokazanego klasycznego podpinania.

Niestety przeglądarki Safari do wersji 14 nie obsługują media.addEventListener, dlatego zmuszeni jesteśmy do użycia starego kodu. Możemy to obejść korztsając z instrukcji try catch


function testMedia(media) {
    if (media.matches) {
        //...
    }
}

try {
    //Chrome & Firefox
    media.addEventListener("change", testScrollPos);
} catch (e) {
    try {
        //Safari
        media.addListener((e) => testScrollPos);
    } catch (e) {
        console.error(e);
    }
}

Wszelkie prawa zastrzeżone. Jeżeli chcesz używać jakiejś części tego kursu, skontaktuj się z autorem.
Aha - i ta strona korzysta z ciasteczek.