Détection de résolution d'écran via JS
Résolu
frugi
Messages postés
67
Statut
Membre
-
frugi Messages postés 67 Statut Membre -
frugi Messages postés 67 Statut Membre -
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:
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:
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 *_*
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 *_*
3 réponses
-
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
-
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 =) -
En fait ça fonctionne... sauf sous IE T_T
Une solution pour IE?
