Sprawdzanie media queries

DOM dostarcza funkcje, dzięki którym możliwym jest sprawdzenie wyników media query. Jest to możliwe przy użyciu interfejsu MediaQueryList i jego funkcji oraz właściwości. Po utworzeniu obiektu MediaQueryList możesz zbadać wynik zapytania (query) lub (dodatkowo) otrzymywać powiadomienie, gdy rezultat się zmieni.

Tworzenie listy media query

Zanim będziesz mógł ocenić wynik zapytania, musisz utworzyć obiekt MediaQueryList, reprezentujący media query. Aby to uczynić użyj metody window.matchMedia.

Na przykład, jeśli chcesz ustalić czy orientacja urządzenia jest pionowa czy pozioma, możesz skorzystać z takiego zapytania jak poniżej:

var mql = window.matchMedia("(orientation: portrait)"); /* sprawdzamy czy orientacja obiektu, jest pionowa; zwraca obiekt MediaQueryList */

Sprawdzanie rezultatu zapytania (query)

Po wykonaniu powyższej metody, mamy dostęp do obiektu MediaQueryList, który ma kilka przydatnych metod i właściwości. Jedną z nich jest cecha matches, która zwraca prawdę lub fałsz.

if (mql.matches) {
  /* wykryta orientacja pionowa */
} else {
  /* wykryta orientacja pozioma */
}

Otrzymywanie powiadomień

W przypadku, gdy chciałbyś na bieżąco dostawać alerty o stanie zapytania (query), skorzystaj z funkcji addListener(), która jest zdecydowanie wydajniejsza aniżeli sprawdzanie "ręcznie" co jakiś czas. By skorzystać z tego ułatwienia, wywołaj tę funkcję na obiekcie MediaQueryList, określając obserwator, który implementuje interfejs MediaQueryListListener:

var mql = window.matchMedia("(orientation: portrait)");
mql.addListener(zmianaOrientacji);
zmianaOrientacji(mql); 

Powyższy kod tworzy media query list, a następnie dołącza listener. Zauważ, że po dodaniu listenera, przywołaliśmy listenera bezpośrednio - trzecia linijka. To pozwala nam określić aktualną orientację urządzenia.

Zaimplementowana metoda zmianaOrientacji() pozwala nam wykonać pewne czynności, gdy zmieni się położenie urządzenia.

function zmianaOrientacji(mql) {
  if (mql.matches) {
    /* wykryta orientacja pionowa */
  } else {
    /* wykryta orientacja pozioma */
  }
}

Wyłączenie powiadomień

Gdy nie potrzebujesz już powiadomień dotyczących zmiany wartości zapytania, możesz wywołać metodę removeListener() dostępną w obiekcie MediaQueryList:

mql.removeListener(zmianaOrientacji);

Zgodność z przeglądarką

Zobacz także

• Media queries
• window.matchMedia()
• MediaQueryList
• MediaQueryListListener