Détection de résolution d'écran via JS

Résolu/Fermé

frugi Messages postés 53 Date d'inscription lundi 22 décembre 2008 Statut Membre Dernière intervention 26 janvier 2016 - Modifié par frugi le 25/09/2012 à 15:09
frugi Messages postés 53 Date d'inscription lundi 22 décembre 2008 Statut Membre Dernière intervention 26 janvier 2016 - 26 sept. 2012 à 06:15

Bonjour,

Je planche sur ce problème depuis quelques heures...

J'aimerais que selon la résolution de l'écran affichant mon site, une autre feuille de style soit utilisée.

J'ai donc trouvé un script permettant cela:

<script type="text/javascript">  

function getcss(cssfile){  

loadcss = document.createElement('link')  

loadcss.setAttribute("rel", "stylesheet")  

loadcss.setAttribute("type", "text/css")  

loadcss.setAttribute("href", cssfile)  

document.getElementsByTagName("head")[0].appendChild(loadcss)  

}  

if(screen.width=640)  

{  

getcss('small.css')  

}  



else if(screen.width>=640)  

{  

getcss('index.css')  

}  

</script>

Sauf qu'avec ce code, ma page utilise tout le temps "small.css".

Et si je modifie simplement les signes < > et = pour en arriver à ce code:

<script type="text/javascript">  

function getcss(cssfile){  

loadcss = document.createElement('link')  

loadcss.setAttribute("rel", "stylesheet")  

loadcss.setAttribute("type", "text/css")  

loadcss.setAttribute("href", cssfile)  

document.getElementsByTagName("head")[0].appendChild(loadcss)  

}  

if(screen.width<640)  

{  

getcss('small.css')  

}  



else if(screen.width>=640)  

{  

getcss('index.css')  

}  

</script>

C'est l'inverse qui se produit: pour n'importe quelle résolution, seule la page "index.css" est utilisée...

J'ai essayé d'autres scripts dans le genre, mais aucun n'a l'air de fonctionner sur ma page...
J'ai tout vérifier 10 fois, je ne comprend pas pourquoi ces scripts marchent pour tout le monde sauf moi ><

Help *_*

A voir également:

Détection de résolution d'écran via JS
Double ecran - Guide
Capture d'écran whatsapp - Accueil - Messagerie instantanée
Capture d'écran samsung - Guide
Retourner ecran windows - Guide
Ecran noir pc - Guide

3 réponses

Réponse 1 / 3

Pierrecastor Messages postés 41473 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 30 mai 2024 4 144
25 sept. 2012 à 15:18

Salut

Pas besoin de JS pour ça, il y à une nouvelle fonction à l'HTML pour l'adaptation à la résolution.

http://www.yoyodesign.org/doc/w3c/css2/media.html
https://www.alsacreations.com/article/lire/930-css3-media-queries.html

Réponse 2 / 3

frugi Messages postés 53 Date d'inscription lundi 22 décembre 2008 Statut Membre Dernière intervention 26 janvier 2016
25 sept. 2012 à 15:31

Merci!

Effectivement un simple:

<LINK rel="stylesheet" type="text/css" 
	 media="screen and (min-width: 640px)" href="index.css">
     <LINK rel="stylesheet" type="text/css" 
	 media="screen and (max-width: 639px)" href="small.css">

suffit ^^"

J'ai cherché trop compliqué T_T

Bonne après-midi =)

Réponse 3 / 3

frugi Messages postés 53 Date d'inscription lundi 22 décembre 2008 Statut Membre Dernière intervention 26 janvier 2016
25 sept. 2012 à 21:16

En fait ça fonctionne... sauf sous IE T_T

Une solution pour IE?

Pierrecastor Messages postés 41473 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 30 mai 2024 4 144
25 sept. 2012 à 21:20

Même avec la version 9 ?

frugi Messages postés 53 Date d'inscription lundi 22 décembre 2008 Statut Membre Dernière intervention 26 janvier 2016
25 sept. 2012 à 22:41

Aucune idée, j'ai XP, donc IE9 pas possible x)

Pierrecastor Messages postés 41473 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 30 mai 2024 4 144
25 sept. 2012 à 22:44

Ha, ben sois tu oublie les navigateurs inférieure à IE9 parce qu'IE, c'est la grosse merde. ;-)

Sois tu crée un CSS pour les navigateur pas compatible avec media query.

frugi Messages postés 53 Date d'inscription lundi 22 décembre 2008 Statut Membre Dernière intervention 26 janvier 2016
25 sept. 2012 à 23:45

Ah mais je suis du même avis que toi sur IE x)
Mais j'essaie de faire en sorte que mon site soit compatible avec le maximum de navigateurs et de résolutions...
Et vu qu'il y a toujours des gens (même s'ils ne sont plus très nombreux) qui utilisent IE..
Et je le déclare comment ce CSS?

Pierrecastor Messages postés 41473 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 30 mai 2024 4 144
26 sept. 2012 à 00:38

A la fin de l'article :

https://www.alsacreations.com/article/lire/930-css3-media-queries.html

Discussions similaires

Ecran iphone qui est trop grand