1485 sujets
Web Mobile et responsive web design
Bonjour,
en CSS les Media Queries bien entendu mais je suppose qu'il me manque une info si tu poses la question de matchMedia directement
Pour lier des MQ à du JavaScript sans avoir recours à matchMedia (coucou IE9), je me servais de l'astuce suivante : https://davidwalsh.name/device-state-detection-css-media-queries-javascript
En CSS, on fixe des valeurs récupérables en JS en prenant soin que ces valeurs n'aient aucune influence sur les styles visibles et perçus des pages.
En JS, on regarde quelle est la valeur actuelle et on agit en conséquence.
Sinon polyfill.
Edit : veux-tu te passer de JS parce qu'amélioration progressive ou bien est-ce un souci de compatibilité ?
Modifié par Felipe (17 Oct 2016 - 17:46)
en CSS les Media Queries bien entendu mais je suppose qu'il me manque une info si tu poses la question de matchMedia directement
Pour lier des MQ à du JavaScript sans avoir recours à matchMedia (coucou IE9), je me servais de l'astuce suivante : https://davidwalsh.name/device-state-detection-css-media-queries-javascript
En CSS, on fixe des valeurs récupérables en JS en prenant soin que ces valeurs n'aient aucune influence sur les styles visibles et perçus des pages.
En JS, on regarde quelle est la valeur actuelle et on agit en conséquence.
Sinon polyfill.
Edit : veux-tu te passer de JS parce qu'amélioration progressive ou bien est-ce un souci de compatibilité ?
Modifié par Felipe (17 Oct 2016 - 17:46)
Merci Felipe, je vais aller consulter ton lien.
En fait, le tuto http://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html datant de 2013, je me demandais s'il existait maintenant une autre méthode que je ne connaitrais pas.
Mon besoin : ne pas afficher un slider (qui est juste décoratif) en dessous d'une certaine taille d'écran
En fait, le tuto http://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html datant de 2013, je me demandais s'il existait maintenant une autre méthode que je ne connaitrais pas.
Mon besoin : ne pas afficher un slider (qui est juste décoratif) en dessous d'une certaine taille d'écran
Non c'est bien la méthode à utiliser actuellement
En 2013, le problème était l'absence de support sur IE9 et moins ; en 2016 c'est réglé.
Pour ne pas charger inutilement les images, un display: none (dans une MQ) sur un conteneur devrait suffire mais tu peux aussi choisir de les lazyloader en JS (sauf peut-être la 1ère pour éviter un trop long temps sans rien devant les yeux de l'utilisateur). Idem pour le script du slider s'il fait quelques dizaines de ko (y a peu de chances, mieux vaut charger quelques lignes même si elles sont inutiles dans cette résolution). À toi de voir à quel point et comment optimiser cette différente entre mobile et desktop
En 2013, le problème était l'absence de support sur IE9 et moins ; en 2016 c'est réglé.
Pour ne pas charger inutilement les images, un display: none (dans une MQ) sur un conteneur devrait suffire mais tu peux aussi choisir de les lazyloader en JS (sauf peut-être la 1ère pour éviter un trop long temps sans rien devant les yeux de l'utilisateur). Idem pour le script du slider s'il fait quelques dizaines de ko (y a peu de chances, mieux vaut charger quelques lignes même si elles sont inutiles dans cette résolution). À toi de voir à quel point et comment optimiser cette différente entre mobile et desktop