CSS en fonction de la résolution de l'écran

**Galdon** · 12/06/2008, 15h28

Bonjour, en fonction de la taille de la fenêtre du nav, j'utilise le CSS approprié. Voici mon code :
Code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
	var css = document.createElement('link');
	css.rel = 'stylesheet';
	css.type = 'text/css';
	if(window.innerWidth < 1024){
		css.href='/scripts/kwicks_mini.js';
		alert('mini');
	}
	else{
		css.href='/scripts/kwicks.js';
		alert('normal');
	}
	document.head.appendChild(css);
</script>
<noscript><link rel="stylesheet" type="text/css" href="/style/kwicks.css"/></noscript>

Ça ne fonctionne pas : dans les 2 cas (mini et normal), aucune feuille de style n'est utilisée.

Comment résoudre mon problème ?

Merci

**DoubleU** · 12/06/2008, 15h34

Attention, la propriété window.innerWidth donne des résultats très différents suivant ton navigateur est s'il est en mode quirks ou non.

Edit : cf ceci

Cependant, ca ne doit pas être la seule erreur puisque même le normal ne marche pas.

Si tu utilises l'extension de firefox WebDevelopper, regarde dans "CSS", "View CSS". Si ton fichier est mal chargé, tu auras ici une erreur 404. Sinon, c'est que ca vient encore d'ailleurs.

**Galdon** · 12/06/2008, 15h51

Je n'ai ni la feuille kwicks.css ni kwicks_mini.css. Par contre j'ai corrigé le innerWidth, voici le contenu de <head> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
	var css = document.createElement('link');
	css.rel = 'stylesheet';
	css.type = 'text/css';
	if(document.documentElement.clientWidth < 1024){
		css.href='/scripts/kwicks_mini.js';
		alert('mini');
	}
	else{
		css.href='/scripts/kwicks.js';
		alert('normal');
	}
	document.head.appendChild(css);
</script>
<noscript><link rel="stylesheet" type="text/css" href="/style/kwicks.css"/></noscript>
<link rel="stylesheet" type="text/css" href="/style/general.css"/>
<link rel="stylesheet" type="text/css" href="/style/content.css"/>
 
<script type="text/javascript" src="/scripts/mootools.js"></script>
<script type="text/javascript" src="/scripts/kwicks.js"></script>
<script type="text/javascript" src="/scripts/swfobject.js"></script>
<!--[if lt IE 7]>
<script defer type="text/javascript" src="/scripts/pngfix.js"></script>
<![endif]-->