1485 sujets

Web Mobile et responsive web design

Détection des media queries en JS

Pages :
Modérateur
(reprise du message précédent)

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.
@audrasjb> Si tu avais tout lu tu aurais remarqué que je l'ai déjà mentionné.

Zelalsan a écrit :
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.


La question n'est effectivement pas px VS em mais mon avis a été donné "en cours de route". Chacun se fait son idée sur l'article proposé et moi j'ai eu la mienne et il s'agit de l'un des deux.
Je ne cherche absolument pas à démontré quoi que ce soit Smiley biggrin ni à convaincre quiconque. Tu peux en effet travailler avec l'unité qui te convient, ça restera ta méthode de travail et ta façon de faire.

@kustolovic> je n'ai pas prôné l'utilisation JS, le sujet portait là-dessus.
Gyzm0 a écrit :


En attendant, mon article pas très sérieux vient d'être cité dans un article de N. Hoizey...

http://www.24joursdeweb.fr/2013/lachez-prise-sans-perdre-le-controle-grace-a-l-unite-css-em/

Et je tiens à te dire que je n'aime pas le ton sur lequel tu parles, tu as l'air très arrogant et sûr de toi mais je ne suis pas certain que ce que tu avances est pertinent et juste...

Un autre article sur l'utilisation des EM en milieu responsive :

http://marieguillaumet.com/refonte-mon-portfolio-du-responsive-en-em-seconde-partie/


Je viens de lire ça...
Oula non, très loin de moi l'idée d'être arrogant crois-moi Smiley smile . Je ne sais pas comment tu as deviné mon ton Smiley biggrin mais je ne voulais pas du tout en arriver là et si ça t'a paru négatif d'une quelconque manière, ce n'était vraiment pas mon intention.
Je parlais de cet article que j'ai survolé et c'est juste un avis que j'ai donné.
Je ne voulais pas créer autant de remues Smiley biggrin
Pour des raisons d'accessibilité, je confirme que les media-queries doivent être définies en unités relatives.

Pour en être convaincus, les adeptes du px testerons le visuel de leur site après avoir changé la taille de la police par défaut de leur brower favori. Ils testerons notament les points de rupture..
Modérateur
Sinon pour la solution qui consiste à effectuer des tests de largeurs, une solution simple (en jQuery sinon ça devient autrement moins simple pour la retrocompatibilité)
Il suffit de récupérer la taille de base sur l'élément HTML (mais il faut définir sa taille globale sur body bien entendu)

var baseEmInPixel = parseInt($('html').css('font-size'), 10);


Pour la solution proposée par @Gyzm0, voici un article intéressant:

http://davidwalsh.name/device-state-detection-css-media-queries-javascript

Le seul inconvénient de cette technique est que l'on ne détecte que la média-query définie en dernier si plusieurs correspondent.
Je viens de tomber par hasard sur ce post, eh bien il semble répondre parfaitement au problème que j'avais, à savoir arriver à détecter la tablette sans javascript et uniquement avec les media queries css.
Alors merci infiniment Gyzm0, parceque ta technique a l'air reconnue et géniale, et ça va me permettre de contourner en un sens le problème.
Je m'en vais étudier ça de ce pas.
J'espère que ça va être profitable.
Modifié par EmmaGuyot (19 Jun 2014 - 00:39)
Pages :
Sujet clos
Aller à