Monday, December 17, 2012

window.matchMedia, MediaQuery en Javascript

Résumé

Retourne un objet MediaQueryList représentant le résultat du pattern MediaQuery passé en paramètre.

Syntaxe 

  1. mql = window.matchMedia(mediaQueryString)

Exemple

if (window.matchMedia("(min-width: 400px)").matches) {
   /* the view port is at least 400 pixels wide */
} else {
   /* the view port is less than 400 pixels wide */
}

Il est possible aussi d'ajouter dans le pattern Media Query, l'orientation : (orientation: portrait).

On peut aussi ajouter un observer implémantant l'interface MediaQueryListListener, pour être notifier du changement d'orientation par exemple comme ci-dessous :

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

  4. function handleOrientationChange(mql) {
  5.    if (mql.matches) {
  6.      /*The device is currently in portrait orientation */
  7.    } else {
  8.      /*The device is currently in landscape orientation */
  9.    }
  10. }


Cette fonction peut être très utile lorsque l'on gère directement le design en javascript. Car l'étude du User-Agent n'est quelque fois pas suffisant pour déterminer le style d'affichage notamment sur les tablettes 7''.
En paysage, on affichera plutôt le design dédié au tablette alors qu'en portrait on aura tendance à afficher le design Smartphone.