mozilla
Wyniki wyszukiwania

    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

    Contributors to this page: P0lip
    Ostatnia aktualizacja: P0lip,