Window matchMedia()
Příklad 1
Je obrazovka/výřez větší než 700 pixelů na šířku:
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
Definice a použití
Metoda matchMedia()
vrací MediaQueryList s výsledky z dotazu.
Viz také:
Mediální dotazy
Mediálními dotazy této matchMedia()
metody mohou být jakékoli mediální funkce pravidla
CSS @media , jako je minimální výška, minimální šířka, orientace atd.
Příklady
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
Syntax
window.matchMedia(mediaQuery)
Parametry
Parameter | Description |
mediaQuery | Required. A string representing a media query. |
Návratová hodnota
Typ | Popis |
Objekt | Objekt MediaQueryList s výsledky dotazu na média. |
Příklady vysvětleny
První příklad na této stránce spustí dotaz na média a porovná jej s aktuálním stavem okna.
Chcete-li spustit responzivní mediální dotaz při každé změně stavu okna, přidejte do objektu MediaQueryList posluchač událostí (viz „Další příklady“ níže):
Další příklady
Pokud je zobrazovaná oblast široká nebo rovna 500 pixelům, nastavte barvu pozadí na žlutou, jinak na růžovou:
// Create a match function
function myFunction(x) {
if (x.matches) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// // Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 700px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction);
Podpora prohlížeče
matchMedia()
je podporován ve všech moderních prohlížečích:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 11 | Yes | Yes | Yes | Yes |