MediaQueries

Comment faire pour appliquer un code JavaScript à une certaine résolution d’écran ?

Les Media Queries que nous utilisons en CSS, existent-elles en JavaScript ?

Oui, il existe différentes méthodes pour obtenir le même effet en JavaScript. Voici différentes méthodes pour obtenir la largeur actuelle de la fenêtre:

• document.documentElement.clientWidth
• document.body.clientWidth
• window.innerWidth

Ces trois méthodes devraient retourner le même nombre de pixels.

Un exemple d’utilisation:

if (document.documentElement.clientWidth < 900) {
	// scripts
}

if (document.documentElement.clientWidth > 680 && document.documentElement.clientWidth < 1260) {
	// scripts
}

• screen.width = donne la largeur totale de l’écran, pas toujours égale à la fenêtre du navigateur.

Voici un exemple utilisant cette méthode:

if (screen.width >= 600) {
	// complicated script
}

méthode: matchMedia

Une autre méthode consiste à utiliser window.matchMedia() :

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
}

On peut aussi tester l’orientation:

var mql = window.matchMedia("(orientation: portrait)");
if (mql.matches) {
  /* La zone d'affichage/viewport est en portrait */
} else {
  /* La zone d'affichage/viewport est en paysage */
}

Voir documentation MDN

Méthode subtile

On peut souhaiter suivre les breakpoints du CSS, sans redéfinir les mêmes unités dans le JavaScript. Voici une technique utilisée par Jeremy Keith:

Conditional CSS