From de5c456ebded0e038adbf23db34cc290c8829180 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:24 +0100 Subject: unslug pl: move --- .../media_queries/testing_media_queries/index.html | 116 +++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 files/pl/web/css/media_queries/testing_media_queries/index.html (limited to 'files/pl/web/css/media_queries/testing_media_queries') diff --git a/files/pl/web/css/media_queries/testing_media_queries/index.html b/files/pl/web/css/media_queries/testing_media_queries/index.html new file mode 100644 index 0000000000..140d3a1796 --- /dev/null +++ b/files/pl/web/css/media_queries/testing_media_queries/index.html @@ -0,0 +1,116 @@ +--- +title: Sprawdzanie media queries +slug: Web/Guide/CSS/Sprawdzanie_media_queries +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +

{{SeeCompatTable}}

+ +

DOM dostarcza funkcje, dzięki którym możliwym jest sprawdzenie wyników media query. Jest to możliwe przy użyciu interfejsu {{domxref("MediaQueryList") }} i jego funkcji oraz właściwości. Po utworzeniu obiektu {{domxref("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 {{domxref("MediaQueryList") }}, reprezentujący media query. Aby to uczynić użyj metody {{domxref("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 {{domxref("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 {{domxref("MediaQueryList") }}, określając obserwator, który implementuje interfejs {{domxref("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 {{domxref("MediaQueryList") }}:

+ +
mql.removeListener(zmianaOrientacji);
+
+ +

Zgodność z przeglądarką

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatGeckoDesktop("6.0") }}1012.15.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.0{{CompatUnknown}}1012.15
+
+ +

Zobacz także

+ + -- cgit v1.2.3-54-g00ecf