Responsive design : Les largeurs en JavaScript et en media query

responsivelargeur design

Nombreux d’entre nous, ce sont déjà confrontés à un bug d’affichage dû à la différence d’interprétation de la largeur d’un bloc par JavaScript d’un coté et du media Query de l’autre, par exemple si on veut exactement déclencher à 360px une action à la fois en JavaScript et en CSS.

JavaScript propose déjà plusieurs fonctions natives pour définir la largeur de votre device ou de votre browser :

  • screen.width
  • innerWidth
  • outerWidth
  • availWidth
  • clientWidth
  • device-width, etc…

Et de son côté, CSS permet également de cibler cette largeur via les Media Queries, à l’aide de @media (width: / device-width: …).

Vous le savez peut être déjà, JavaScript et CSS ne font pas forcement bon ménage, c’est-à-dire aucune des solutions JavaScript ne donnera la même valeur en CSS.

Tout cela dépendra de certaines interprétations des propriétés CSS ou bugs de navigateurs et de l’orientation du device.

Solutions

Au final, la seul méthode qui marche convenablement pour avoir en JavaScript exactement la même valeur que celle renvoyée par les media queries CSS c’est la méthode JavaScript matchMedia().
La syntaxe s’écrira comme suit :

MatchMedia est relativement récent et reconnu qu’à partir de IE10 et Android version 3, effectivement c’est un peu limite par rapport à la compatibilité, il est conseillé d’utiliser le plugin MatchMedia polyfill, conçue par Scott Jehl, Paul Irish et Nicholas Zakas pour être compatible sur bon nombre de navigateurs.

Répondre