Window : méthode matchMedia()

Syntaxe

matchMedia(mediaQueryString)

Paramètres

mediaQueryString

Une chaîne de caractères définissant la requête média à analyser en un objet MediaQueryList.

Comme en CSS, toute fonctionnalité média doit être entourée de parenthèses dans l'expression. Par exemple : matchMedia("(width <= 600px)") ou matchMedia("(orientation: landscape)") fonctionnent, tandis que matchMedia("width < 600px") ou matchMedia("orientation: landscape") ne fonctionnent pas. Les mots-clés pour les types de média (all, print, screen) et les opérateurs logiques (and, or, not, only) n'ont pas besoin d'être entourés de parenthèses.

Valeur de retour

Un nouvel objet MediaQueryList pour la requête média. Utilisez les propriétés et les évènements de cet objet pour détecter les correspondances et surveiller les changements de ces correspondances au fil du temps.

Notes d'utilisation

Vous pouvez utiliser la requête média retournée pour effectuer des vérifications instantanées et basées sur des évènements afin de voir si le document correspond à la requête média.

Pour effectuer une vérification instantanée unique afin de voir si le document correspond à la requête média, regardez la valeur de la propriété matches, qui sera true si le document répond aux exigences de la requête média.

Si vous avez besoin de savoir en permanence si le document correspond ou non à la requête média, vous pouvez plutôt surveiller l'évènement change pour qu'il soit envoyé à l'objet. Il y a un bon exemple de cela dans l'article sur Window.devicePixelRatio.

Exemples

Cet exemple exécute la requête média (width <= 600px) et affiche la valeur de la propriété matches de l'objet MediaQueryList résultant dans un <span> ; en conséquence, la sortie indiquera "true" si la largeur de la fenêtre est inférieure ou égale à 600 pixels, et "false" si la fenêtre est plus large.

JavaScript

let mql = window.matchMedia("(width <= 600px)");

document.querySelector(".mq-value").innerText = mql.matches;

Le code JavaScript passe la requête media à matchMedia() pour la compiler, puis définit la propriété innerText du <span> sur la valeur de la propriété matches des résultats, afin d'indiquer si le document correspond ou non à la requête media au moment où la page a été chargée.

HTML

<span class="mq-value"></span>

Un simple <span> pour recevoir la sortie.

.mq-value {
  font:
    18px "Arial",
    sans-serif;
  font-weight: bold;
  color: #8888ff;
  padding: 0.4em;
  border: 1px solid #ddddee;
}

Résultat

Voir Tester les requêtes media par programme pour des exemples de code supplémentaires.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les requêtes media
• Utiliser les requêtes media depuis le code
• L'interface MediaQueryList