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

Résolu
frugi Messages postés 53 Date d'inscription   Statut Membre Dernière intervention   -  
frugi Messages postés 53 Date d'inscription   Statut Membre Dernière intervention   -
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:

3 réponses

Réponse 1 / 3
Pierrecastor Messages postés 41491 Date d'inscription   Statut Modérateur Dernière intervention   4 149
 
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
0
Réponse 2 / 3
frugi Messages postés 53 Date d'inscription   Statut Membre Dernière intervention  
 
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 =)
0
Réponse 3 / 3
frugi Messages postés 53 Date d'inscription   Statut Membre Dernière intervention  
 
En fait ça fonctionne... sauf sous IE T_T

Une solution pour IE?
0
Pierrecastor Messages postés 41491 Date d'inscription   Statut Modérateur Dernière intervention   4 149
 
Même avec la version 9 ?
0
frugi Messages postés 53 Date d'inscription   Statut Membre Dernière intervention  
 
Aucune idée, j'ai XP, donc IE9 pas possible x)
0
Pierrecastor Messages postés 41491 Date d'inscription   Statut Modérateur Dernière intervention   4 149
 
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.
0
frugi Messages postés 53 Date d'inscription   Statut Membre Dernière intervention  
 
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?
0
Pierrecastor Messages postés 41491 Date d'inscription   Statut Modérateur Dernière intervention   4 149
 
A la fin de l'article :

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

Discussions similaires

Comment branché un pc portable écran cassé sur un écran externe
Skynoz62 -
Vince74 -

13 réponses