Ker je danes običajno, da se do spletnih strani dostopa preko različnih naprav, je le te treba prilagoditi vsem potencialnim napravam in tipom medijev. Kadar imamo opravka le s CSS-jem lahko uporabimo media queryje, dostikrat pa moramo poskrbeti tudi za izvajanje različnih funkcij glede na različne naprave, v teh primerih pa moramo tim medija ugotoviti preko JavaScripta. V tem članku bom predstavil nekaj načinov, kako s pomočjo JavaScripta prilagoditi spletne strani različnim napravam.

Za prilagajanje in izvajanje skript na podlagi velikosti zaslona, je najenostavnejša uporaba preverjanja širine zaslona ali elementa. Najpogosteje se uporablja window.innerWidth, ki vrne širino vidnega polja v slikovnih pikah (px), vključno s širino drsnika, če je le ta prisoten na strani. Predstavlja razpoložljivo širino za vsebino znotraj vidnega polja, izključuje pa elemente uporabniškega vmesnika brskalnika, kot so orodne vrstice. Ta lastnost se tudi sklada s CSS media queryj.

let sirina = window.innerWidth;

Podobno kot innerWidth se lahko uporabi tudi outerWidth, ta pa za razliko vrne širino celotnega okna, vključno z elementi brskalnika, kot so razvijalska orodja in orodne vrstice.

let sirina = window.outerWidth;

Kadar nas zanima izključno širina vsebine lahko uporabimo lastnost clientWidth. Lastnost se uporablja na elementu dokumenta in prikazuje širino vsebine, brez drsnika in elementov brskalnika.

let sirina = document.documentElement.clientWidth;

V primeru, da nas zanima velikost zaslona, ne le vsebine ali okna, pa se lahko uporabi screen.width. Ta prikaže celotno velikost zaslona ne glede na samo vsebino na strani ali velikost okna brskalnika.

let sirina = screen.width;

Pri vseh zgornjih primerih se lahko uporabi event listener, ki spremlja širino zaslona in na podlagi izbranih vrednosti prilagodi elemente ali izvede določene funkcije.

window.addEventListener("resize", spremembaSirine);

function spremembaSirine() {
if (screen.width < 1024) {
tablica = true;
}}

Poleg direktnega preverjanja širine zaslona pa se lahko uporabi tudi window.matchMedia API, ki omogoča dinamično preverjanje trenutnega stanja vidnega polja. Za razliko od zgornjih primerov, ki omogočajo preverjanje po širini zaslona, matchMedia omogoča primerjanje tudi po tipu medijev, na primer za bralnike ali tisk, po načinu zapisa pa je enak media queryjem v CSS-ju.

Za uporabo matchMedia se najprej določi media query, ki je enak kot CSS media query, v tem primeru za zaslone s širino manjšo od 1024px.

const mediaQuery = 'screen and (max-width: 1024px)';

Ko je query določen, se preveri ali zaslon ustreza izbranemu queryju, funkcija matchMedia vrne boolean vrednost true ali false.
const zaslon = window.matchMedia(mediaQuery);
Nato lahko na podlagi rezultata prilagodimo elemente na strani.

if(zaslon.matches){
tablica = true;
} else {
tablica = false;
}

Če želimo tip medija pregledovati dinamično, lahko dodamo event listener, ki preverja spremembo tipa medija in izvede določene funkcije le, ko se medij spremeni.

zaslon.addEventListener('change', spremembaZaslona);
const spremembaZaslona = (e) =>{
if(zaslon.matches){
tablica = true;
} else {
tablica = false;
}}

Ker window.matchMedia omogoča več funkcionalnosti za spremljanje velikosti, resolucije in tipa zaslona, je dobro orodje za ustvarjanje odzivnih spletnih strani, ki se prilagajajo tako različnim velikostim zaslonov kot različnim vrstam naprav in tipom medijev. Ker ponuja večjo prilagodljivost je bolj primeren za izdelavo odzivnih strani, v primerih ko nas zanima le širina okna ali zaslona pa je preverjanje širine zadostno.

Imate dodatna vprašanja?

Za več informacij smo vam vedno z veseljem na voljo. Pišite nam na info@kompas-xnet.si ali nas pokličite 01 5136 990.