Le DOM fournit un certain nombre de fonctionnalités qui permettent de tester les résultats d'une requête média (media query) avec un script. Pour cela, on utilise l'interface MediaQueryList ainsi que ses méthodes et ses propriétés. Une fois qu'on a créé un objet MediaQueryList, on peut vérifier le résultat de la requête ou également recevoir des notifications automatiques lorsque le résultat de la requête change.

Créer une liste de requêtes média

Avant d'évaluer les résultats d'une requête, on doit créer un objet MediaQueryList qui représente la requête média. Pour cela, on utilisera la méthode window.matchMedia.

Ainsi, si on veut avoir une liste de requête qui détermine si l'appareil utilisé est orienté en portrait ou en paysage, on pourra écrire :

var mql = window.matchMedia("(orientation: portrait)");

Vérifier le résultat d'une requête

Une fois que la liste de requêtes média a été créée, on peut vérifier le résultat de la requête grâce à la propriété matches qui représente les résultat de la requête :

if (mql.matches) {
  /* La zone d'affichage/viewport est en portrait */
} else {
  /* La zone d'affichage/viewport est en paysage */
}

Recevoir des notifications liées à la requête

Afin de savoir lorsque l'évaluation d'une requête a changé, il sera plus efficace de déclarer un listener plutôt que d'interroger sans cesse le résultat. Pour cela, on pourra utiliser la méthode addListener() sur l'objet MediaQueryList et définir un observateur qui implémente l'interface MediaQueryListListener :

var mql = window.matchMedia("(orientation: portrait)");
mql.addListener(handleOrientationChange);
handleOrientationChange(mql); 

Ce code crée la liste de requêtes média qui teste l'orientation (l'objet mql) puis ajoute un listener. Une fois qu'on a ajouté le listener, on l'invoque une fois. Cela permet d'ajuster l'état initial du listener selon l'orientation de l'appareil (sinon, le code aurait considéré que l'appareil était en portrait par défaut même si ce dernier était en paysage, ce qui aurait engendré des incohérences).

La méthode handleOrientationChange() qu'on implémente ensuite consulte le résultat de la requête et gère le cas où l'orientation est modifiée :

function handleOrientationChange(mql) {
  if (mql.matches) {
    /* La zone d'affichage/viewport est en portrait */
  } else {
    /* La zone d'affichage/viewport est en paysage */
  }
}

Terminer la réception des notifications

Lorsqu'on ne souhaite plus recevoir de notifications sur les modifications apportées à la valeur de la requête média, on pourra simplement utiliser removeListener() sur l'objet  MediaQueryList :

mql.removeListener(handleOrientationChange);

Compatibilité des navigateurs

Interface MediaQueryList

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
MediaQueryList
Expérimentale
Chrome Support complet 9Edge Support complet OuiFirefox Support complet 6IE Support complet 10Opera Support complet 12.1Safari Support complet 5.1WebView Android Support complet OuiChrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet 5Samsung Internet Android ?
addListenerChrome Support complet 9Edge Support complet 12Firefox Support complet 6IE Support complet 10Opera Support complet 12.1Safari Support complet 5.1WebView Android Support complet OuiChrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet 5Samsung Internet Android ?
matchesChrome Support complet 9Edge Support complet 12Firefox Support complet 6IE Support complet 10Opera Support complet 12.1Safari Support complet 5.1WebView Android Support complet OuiChrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet 5Samsung Internet Android ?
mediaChrome Support complet 9Edge Support complet 12Firefox Support complet 6IE Support complet 10Opera Support complet 12.1Safari Support complet 5.1WebView Android Support complet OuiChrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet 5Samsung Internet Android ?
onchangeChrome Support complet 45Edge ? Firefox Support complet 55IE Aucun support NonOpera Support complet OuiSafari Aucun support NonWebView Android Support complet 45Chrome Android Support complet 45Edge Mobile ? Firefox Android Support complet 55Opera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android ?
removeListenerChrome Support complet 9Edge Support complet 12Firefox Support complet 6IE Support complet 10Opera Support complet 12.1Safari Support complet 5.1WebView Android Support complet OuiChrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet 5Samsung Internet Android ?
EventListener objects as parametersChrome Support complet 45Edge ? Firefox Support complet 55IE Aucun support NonOpera Aucun support NonSafari ? WebView Android Support complet 45Chrome Android Support complet 45Edge Mobile ? Firefox Android Support complet 55Opera Android Aucun support NonSafari iOS ? Samsung Internet Android ?
MediaQueryList inheriting from EventTargetChrome Support complet 45Edge Support complet 16Firefox Support complet 55IE Aucun support NonOpera Support complet OuiSafari Aucun support NonWebView Android Support complet 45Chrome Android Support complet 45Edge Mobile Aucun support NonFirefox Android Support complet 55Opera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot
Dernière mise à jour par : SphinxKnight,