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", () => {
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", () => {
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);
@media
nie kończą się tylko na szerokości czy wysokości. Od dłuższego czasu mamy też media features, dzięki którym możemy wykrywać i inne cechy urządzeń.
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ść korzystają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);
}
}
Trening czyni mistrza
Jeżeli chcesz sobie potrenować zdobytą wiedzę, zadania znajdują się w repozytorium pod adresem: https://github.com/kartofelek007/zadania