Sprawdzanie media queries

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

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ą

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 9 6.0 (6.0) 10 12.1 5.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 ? 10 12.1 5

Zobacz także

Autorzy i etykiety dokumentu

 Autorzy tej strony: P0lip
 Ostatnia aktualizacja: P0lip,