Discussion :

[europole]

Bonjour,

je suis sûr d'avoir déjà vu un javascript qui permette d'adapter la taille d'une page web à la résolution d'écran de l'internaute. Je ne le retrouve pas !

Quelqu'un pourrait-il m'aider ?
Exemple mon site : www.europole-formations.fr qui s'affiche très bien sur mon ordi mais pas ailleurs.

[Bovino]

Code :

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

1
2
screen.availWidth;
screen.availHeight;

[europole]

Code :

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

1
2
screen.availWidth;
screen.availHeight;

Ca semble intéressant. Merci.

Mais je mets ce code où ? Tel quel ?

[RomainVALERI]

99% de chances que la réponse de Bovino soit la bonne, mais avant de la lire je pensais plutôt à un body.clientWidth / body.clientHeight... je vais aller voir du côté de screen pour comprendre la différence ^^

edit : après consultation des spécif. correspondantes, j'en suis arrivé à la brillante conclusion que : ça me dépasse j'ai toujours autant l'impression que c'est la même chose, et avec toujours le même doute en fin de compte...

Pour ceux que ça intéresserait, voici les liens pour comparer :
element.clientHeight
window.screen.availHeight

[Bovino]

body.clientWidth / body.clientHeight

Sont calculés en fonction de la taille de la fenêtre,

screen.availWidth;
screen.availHeight;

Sont calculés en fonction de la taille de l'écran.

[Macmillenium]

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
 
window.onload = function detectscreen() {
var largeur = screen.availWidth;
 
 switch(largeur)
    {
    case 1440 :
        alert("coucou 1440");
        break;
    case 1280 :
        alert("coucou 1280");
        break;
    default :
        alert("oups");
    } 
}

Et tu n'as qu'à remplacer les alert.
Un test sur la largeur suffit.

[europole]

J'ai ajouté ce code derrière la balise </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
<SCRIPT language=javascript> window.onload = function detectscreen() {
var largeur = screen.availWidth;
 
 switch(largeur)
    {
    case 1440 :
        alert("");
        break;
    case 1280 :
        alert("");
        break;
    default :
        alert("");
    } 
} 
</script>

Ca ne change rien. Quelque chose m'échappe

[Macmillenium]

Je veux dire remplacer les alert pour tes styles, par exemple :

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
 
<script type=text/javascript> 
window.onload = function detectscreen() {
var largeur = screen.availWidth;
 
 switch(largeur)
    {
    case 1440 :
        document.getElementById("page").className = "css1440";
        break;
    case 1280 :
        document.getElementById("page").className = "css1280";
        break;
    default :
        document.getElementById("page").className = "csstoutlemonde";
    } 
} 
</script>

Ces styles seront appliquer en fonction de la résolution des visiteurs.

[europole]

Je veux dire remplacer les alert pour tes styles, par exemple :

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
 
<script type=text/javascript> 
window.onload = function detectscreen() {
var largeur = screen.availWidth;
 
 switch(largeur)
    {
    case 1440 :
        document.getElementById("page").className = "css1440";
        break;
    case 1280 :
        document.getElementById("page").className = "css1280";
        break;
    default :
        document.getElementById("page").className = "csstoutlemonde";
    } 
} 
</script>

Ces styles seront appliquer en fonction de la résolution des visiteurs.

Euh ... je dois mettre quoi à la place de "page" ??

Css1440, Css1280... Ca veut dire qu'il faut créer ces css ?

[Macmillenium]

Euh ... je dois mettre quoi à la place de "page" ??

Le bloc que tu veut adapter selon la résolution de tes visiteurs.

Css1440, Css1280... Ca veut dire qu'il faut créer ces css ?

Un truc de ce genre, oui.