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)

Compatibilité 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

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 14 novembre 2019

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

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...
Le 01/04/2020 13:41:32 sur php7 en 118.81 ms