Détection des media queries en JS

Salut à tous,

je cherche une alternative à la fonction matchMedia() qui ne fonctionne hélas pas sur IE9 et ses ancêtres...

J'ai trouvé une solution basée sur la détection du style CSS en JS.

Exemple ici :

http://www.fourfront.us/blog/jquery-window-width-and-media-queries

et une alternative ici :

http://jsbin.com/ehawax/1/

En gros on créé un style unique sur un élément de la page pour chaque media queries, puis en JS on vérifie le style de cet élément pour savoir quelle media queries est appliquée.

J'aimerai avoir votre avis sur cette technique, est ce une bonne pratique ? Moi elle me parait bonne mais n'y aurait t'il pas une faille ?


En vous remerciant par avance
Modifié par Gyzm0 (04 Nov 2013 - 17:30)

salut,
vu que t'es en JS tu peux passer directement par la détection de la largeur d'écran via "screen.width".

Hello,

Dew avait donné un polyfill en fin d'article sur matchMedia()

@tm : tu l'aimes bien cet enquire.js, non ?

@Zelalsan: le problème de "screen.width" c'est que ça ne marche que pour les medias queries avec width en px ? J'aimerai une méthode plus universelle, par exemple si j'utilise les media queries width avec l'unité EM...


@tm: j'ai vu cette lib mais pas je ne l'ai pas encore testée, à voir mais ça fait charger un fichier supplémentaire donc je cherche une solution plus légère.


@6l20: Oui je sais, j'ai même créé un sujet à propos de ce polyfill mais il semble poser quelques soucis sur IE > 9


Merci pour vos réponses mais du coup personne n'a donné son avis sur la méthode que je propose ? Quels seraient les inconvénients de cette technique ?

Les avantages que j'y vois :

- compatible tous navigateurs (nécessite qd même une librairie pr supporter les MQ pr IE tel que respond.js)
- léger (pas de librairie ou de polyfill supplémentaire)
- fonctionne pour toutes les media queries

Zelalsan a écrit :

euuuh.... Pas très bien compris et je ne vois pas trop l'utilité. Tu peux par ailleurs convertir des "px" en "em" très aisément.

Si dans ma css j'ai ce genre de media queries :

@media all and (min-width: 41em)

Comment je détecte la même chose en JS ? Il faut que cela fonctionne sur IE >= 7 pour rappel.

Zelalsan a écrit :
en plus je viens d'y penser. Il faut garder en tête que les "em" sont des unités relatives à la taille de police donc tout ça reste relatif. Si tu définies une police de l'élément égale à "20px" alors 1em sera égal à 20px. Ce qui est dit plus haut est en rapport avec la taille standard des navigateurs.

On est d'accord ! Mais du coup ya un truc que j'ai du mal à comprendre avec le "screen.width" en JS.

Imaginons dans ma CSS, j'ai une media queries pour le design "smartphone" :

@media (max-width: 30em) {

// correspond a du 480px max pour une base de police en 16px.
// correspond a du 600px max pour une base de police en 20px.

}

Dans mon JS, je veux détecter cette media queries pour y ajouter par exemple une fonctionnalité spécifique pour le design "smarphone", comment dois je procéder ? Si je fais :

if ( (screen.width / 16) <= 30 ) {

  // Je lance ma fonctionnalité JS

}

Pour moi ce n'est pas la bonne solution, car ça fonctionnera correctement que pour une base de police de 16px, et il y aura une "désynchronisation" par rapport au CSS si la valeur de base est différente de 16px...

Ou alors il faut calculer en JS la taille de base de la typo pour rendre la valeur dynamique, mais je ne sais pas comment faire ?
Modifié par Gyzm0 (07 Nov 2013 - 10:18)

Tu peux encore une fois récupérer la valeur actuelle de la taille de police. Dans ce cas tu te réfèreras à celle de l'élément "root". Tu donneras ensuite une class à ton "body" pour pouvoir appliquer les styles selon la résolution.
Un exemple simple :

function getStyle(x){return (x.currentStyle) ? x.currentStyle : getComputedStyle(x, null);}

var curFontSize = getStyle(document.documentElement).fontSize;

if (screen.width / curFontSize <= 30){
	document.body.className = "max-30em";
}

À noter qu'ici cela suppose que ton body n'ai aucune class déjà définie car elle est écrasé à chaque fois. Si non la syntaxe changera s'il contiendra d'autres noms de class.

Au passage et encore une fois, tu te compliques vraiment la vie.

Gyzm0 a écrit :

J'ai l'impression qu'on ne se comprend pas bien... Pourquoi dis-tu que je me complique la vie ??

Bin pour la simple raison que tu pourrais passer par des "px". Pour quelle raison tu le fais en "em" ?

Gyzm0 a écrit :

En te relisant, je crois que tu n'as pas bien compris ma demande... Je ne cherche pas à détecter une media queries en JS pour faire du CSS... mais simplement pouvoir executer certains scripts JS

Autant pour moi, je ne m'étais pas très bien concentré sur le sujet. Le script par contre reste le même sans le "document.body.className...". Ton script serait donc dans le bloc de condition.

Zelalsan a écrit :

Bin pour la simple raison que tu pourrais passer par des "px". Pour quelle raison tu le fais en "em" ?

http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

ou

http://www.stephanmuller.nl/ems-relative-media-queries/


Le pixel est une valeurs trop figée, à l'heure des tablettes et smartphones il est temps de passer à une unité qui s'adapte partout

Franchement sans être méchant c'est limite n'importe quoi cette argumentation. Ton premier lien n'a pas trop l'air sérieux car à ce que je sache 16px = 12pt et ce qui est avancé frise parfois le ridicule. Tu peux très bien faire du responsif avec des pixels et il y a d'autres choses qui entrent en considération (notamment le viewport). Il existe des unités relatives même si elle ne sont pas encore intégrées à 100%, il s'agit en occurrence des viewport units.
À noter aussi que même si tu spécifies des unités de police en pixels tu pourras toujours les grossir ou les réduire comme tu le souhaites.

Salut, j'ai pas épluché tout le post en détail, mais pour ma part j'ai trouvé un équivalent des media queries en Js et qui fonctionne sur tous les navigateurs avec la formule décrite dans ce post.

ça fonctionne très bien, ensuite il suffit de tester la valeur retournée par la fonction et d'agir en conséquence dans le code.

Nonseulement je plussoie Audrasjb, mais aussi la technique évoquée par Gyzm0. Je l'ai déjà utilisée et elle apporte un autre avantage très important: la maintenabilité.
En effet, la media-query n'est ainsi définie que dans la CSS. Si on doit la changer, on n'a pas besoin d'aller traquer tous les tests barbares faits en js en plus. Les multiples déclarations de constantes parallèles, ça finit toujours par causer des bugs.

Après je n'utilise pas de solution générique et j'adapte aux besoins, aux media-queries que je souhaite exposer etc.