Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

affichage et résolution écran

2 réponses
Avatar
raphaelle
Bonjour,

Pour afficher un site quel que soit la taille de l'écran, j'ai à ma disposition le script ci-dessous. Cependant, je ne sais pas comment le traduire dans ma feuille de style. Auriez-vous une idée ?

Par avance, merci

Raphaëlle


Code: JavaScript

1.
/*<!--[CDATA[ */
2.
jQuery(document).ready(function(){ssc()});
3.
window.onresize=ssc;
4.
function ssc()
5.
{
6.
var a = document.documentElement.clientWidth;
7.
document.body.className = (a<= 800) ? 'scr_small' :
8.
(a<=1024) ? 'scr_average' :
9.
(a<=1280) ? 'scr_high' :
10.
'scr_wide';
11.
}
12.
/* ]]> -->*/

2 réponses

Avatar
Olivier Miakinen
[ diapublication et suivi dans un seul groupe ]

Bonjour,

Le 14/07/2008 23:14, raphaelle a écrit :

Pour afficher un site quel que soit la taille de l'écran,



Biiip !

Il ne faut *jamais* afficher un site en fonction de la taille de
*l'écran*, en premier lieu parce que beaucoup de gens (surtout ceux
ont un grand écran) n'ouvrent pas leur navigateur à la taille maximale.

Cela dit, je crois que le script que tu montres contrôle non pas la
taille de l'écran mais la taille de la fenêtre, ce qui est un peu mieux.

j'ai à ma disposition
le script ci-dessous. Cependant, je ne sais pas comment le traduire dans ma
feuille de style. Auriez-vous une idée ?



Le mieux à faire, c'est de se passer complètement de ce genre de script.
Une façon simpliste consiste à utiliser une taille fixe raisonnable (700
pixels par exemple). Et la façon idéale c'est le « design élastique ».

Voici quelques liens intéressants :
http://www.google.fr/search?qÞsign+%C3%A9lastique
http://www.pompage.net/pompe/designelastique/

Vu que ma réponse à ta question concernant JavaScript n'a plus rien à
voir avec JavaScript, je fais une diapublication et je propose un suivi
vers le groupe <fr.comp.infosystemes.www.auteurs>, plus adapté aux
questions et réponses concernant CSS.

Cordialement,
--
Olivier Miakinen
Avatar
SAM
raphaelle a écrit :
Bonjour,

Pour afficher un site quel que soit la taille de l'écran, j'ai à ma disposition
le script ci-dessous. Cependant, je ne sais pas comment le traduire dans ma
feuille de style. Auriez-vous une idée ?



Y en a vraiment raz la patate de cette manie de vouloir adapter je
n'sais quoi à la taille de mon 36 pouces alors que mon navigateur est
ouvert avec une fenêtre en 872 x 737 pixels

Merci de ne pas confondre 'écran' et 'fenêtre' !

Pour la question ce n'est pas ici : on parle de JavaScript pas de CSS.
Bon ... ben ... tu dois faire une CSS avec les classes :

body { /* fenetre tres grande */
background-image: url(fond_big.jpg);
}
body.scr_small { /* fenetre <= 800 px */
background-image: url(fond_800.jpg);
}
body.scr_average { /* fenetre <= 1024 px */
background-image: url(fond_1024.jpg);
}
body.scr_high { /* fenetre <= 1280 px */
background-image: url(fond_1280.jpg);
}


Code: JavaScript

1.
/*<!--[CDATA[ */
2.
jQuery(document).ready(function(){ssc()});



ça commence bien !
voir le forum de jQuery ! non mais !

Bon, finalement, quel est le but ?
Pourquoi se compliquer la vie avec différentes classes pour différentes
tailles de fenêtres ?

Qu'il y a t-il de si important qu'il faille le redimensionner en
fonction de cette taille (approximativement escomptée) de fenêtre ?

D'autant que les CSS savent faire l'adaptation toutes seules sans
javascript !
(au moins pour les boites et les images (sauf les images de fond) )


<script type="text/javascript">
// sans bibli inutile ...
function larg() {
var a = window.innerWidth?
window.innerWidth :
(document.documentElement &&
document.documentElement.clientWidth)?
document.documentElement.clientWidth :
0;
if(a!=0 && document.body)
document.body.className = (a<= 800)? 'scr_small' :
(a<24)? 'scr_average' :
(a<80)? 'scr_high' :
'';
}
window.onload = larg;
</script>


--
sm