Retourner à la page d'accueil de TJS

Méthode : window.matchMedia()

Vérifie si la propriété CSS @media est active ou non

Syntaxe
MediaQueryList window.matchMedia(String media)

Compatible tous navigateurs

Description
Retourne un objet de type MediaQueryList qui permet de détecter par JavaScript si la propriété @media du CSS en cours est active ou non.

L'objet de type MediaQueryList contient les propriétés :
media sous forme de chaîne de caractères
matches sous forme de booléen

Utilisez la propriété matches pour obtenir le résultat sous forme de booléen utilisable directement dans une condition.


Exemple 1 : Testez si il existe une propriété CSS de media type smartphone
Code source
<script type="text/javascript">
console.log(window.matchMedia("(max-width:380px)").media);
console.log(window.matchMedia("(max-width:380px)").matches);

if (window.matchMedia("(max-width:380px)").matches) {
 document.write("JavaScript a détecté une CSS @media en mode smartphone active")
} else {
 document.write("JavaScript n'a pas détecté une CSS @media en mode smartphone active")
}

</script>

Résultat
Emulation de la console
Explication
Détecte la taille maximale de 380px en largeur depuis la CSS @media.
Page mise à jour le

Nouvelle édition Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 21 octobre

Version papier à 29€90
Format électronique à 22€99.

Commandez en ligne

Chercher une fonction, un objet, ...

Le 28/11/2020 08:59:54 sur php7 en 108.29 ms