This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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ą

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,