DOM et screen.width / screen.height - HTML/CSS - Programmation
Marsh Posté le 08-03-2005 à 14:37:53
J'esssaye d'adapter la taille d'un div dans une feuille de style en fonction de l'écran sur le client. Un petit script charge la bonne feuille de style en fonction d'un test sur screen.width et screen.height. Ca marche sous IE, mais sous FF, il reste toujours dans la définition la plus petit (document.write de screen.width = toujours 800).
Voili voila.
Z.
Marsh Posté le 08-03-2005 à 14:38:33
Pas pourquoi tu donne pas des dimensions en pourcentage alors
Marsh Posté le 08-03-2005 à 14:44:44
J'ai essayé, ça fait pas génial au niveau graphique au niveau de tout ce qu'il y a dedans, j'ai des tailles précises pour chaque dimension, à savoir height: 500px pour un 768x1024 et height: 335px pour un 600x800.
Z.
Marsh Posté le 08-03-2005 à 14:46:25
Ouch... Le problème de la solution en JS, c'est que chez 9% des gens, ça va pas marcher
Marsh Posté le 08-03-2005 à 14:48:48
Ben j'ai pas trop le choix...
Pour info, le bout de code dans le head :
--------------------------------------
<script language="javascript">
<!--
var x=screen.width;
var y=screen.height;
document.write("<link rel=\"stylesheet\" href=\"" );
if (x==800 && y==600) {
if (menu==0) {document.write("inc/s800x600m0.css" )} else {document.write("inc/s800x600m1.css" )};
} else {
if (menu==0) {document.write("inc/s1024x768m0.css" )} else {document.write("inc/s1024x768m1.css" )};
};
document.write("\" type=\"text/css\">" );
//-->
----------------------------------
Z.
Marsh Posté le 08-03-2005 à 14:53:31
Ah ben plusieurs erreurs...
Marsh Posté le 08-03-2005 à 14:56:30
Pour le problème de résolutions, 2 sec (ma précédente réponse a été postée pensant que c'était un autre topic )
Marsh Posté le 08-03-2005 à 15:00:23
Et si la personne a un ecran en 1600x1200, tu crois qu'il surf en plein ecran... J'en doute, il risque de surfer en mode fenetre, et sa fenetre n'aura pas forcement une taille "standard".
Le mieux reste l'utilisation des pourcentages.
Marsh Posté le 08-03-2005 à 15:01:54
Pour le 3e point, je suppose que tu parles de <!-- et //-->, pour les commentaires. Je remplace par quoi ?
Et puis autre question : est-ce important de rester dans les spécifications d'une section CDATA puisque le html n'est pas déclaré comme un xml dans l'en-tête (<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> ) ??
Pour le reste, j'ai remplacé document.write par document.createElement et language="javascript" par type="text/javascript", et ça ne marche plus : il m'écrit dans le html le nom de la feuille de style comme si c'était du texte, et non du html, et forcément la feuille de style n'est pas chargée.
Z.
Marsh Posté le 08-03-2005 à 15:04:16
Si ça marche plus, c'est qu'il y a un problème. Sinon si t'es en HTML 4.01, pas de probs pour les CDATA, tu peux laisser les commentaires normaux
Marsh Posté le 08-03-2005 à 15:08:07
J'ai remis document.write, et là ça remarche, je suppose qu'en HTML 4.01 c'est ça qu'il faut utiliser pour ce que je veux faire.
Par contre, ça ne résoud pas le pb de screen.width, quand je l'affiche sous FF, ne change pas de valeur quand je modifie la def écran, alors que IE change bien à chaque fois...
Si tu veux jeter un oeil : http://zoneproweb.free.fr (il s'agit du cadre central qui contient les rectangles rouges et les photos), c'est surtout sur la hauteur qui reste toujours la même, que ça& se voit.
Z.
Z.
Marsh Posté le 08-03-2005 à 15:10:44
Mouaip, plusieurs erreurs encore en fait. Genre les résolutions 640*480 se tapent la feuille 1024*768, pas cool
Marsh Posté le 08-03-2005 à 15:20:14
J'ai lu l'article Article sur quirksmode.org, j'ai pas tout compris (c'est quoi "viewport" ?)
Marsh Posté le 08-03-2005 à 15:21:06
Ouch, si tu pige pas l'anglais, laisse tomber le développement
Marsh Posté le 08-03-2005 à 15:23:39
Non, c'est pas l'anglais le pb !
Mais pour le pb qui me concerne, les spec CSS2 sur la hiérarchie des éléments... D'ailleurs je ne sais toujours ce qu'est viewport.
A+
Z.
Marsh Posté le 08-03-2005 à 15:26:23
En fouillant sur la page donnée, tu peux trouver normalement self.screen.width et self.screen.height. Si ça marche pas, c'est qu'il y a un problème quelque part
Marsh Posté le 08-03-2005 à 15:36:49
Yep, j'ai tenté le coup (d'utiliser self.screen.height au lieu de screen.height), les symptomes sont toujours les mêmes (OK sous IE pas sous FF).
Bon bon... "Ya un problème..."
Marsh Posté le 08-03-2005 à 15:55:21
le "Viewport", c'est la surface d'affichage.
En clair, c'est la zone que le browser dédie à l'affichage des pages web, donc la partie blanche quand aucune page n'est chargée (le browser moins les barres de status/menu/... et sans les scrollbars)
Marsh Posté le 08-03-2005 à 21:42:32
Pourquoi ne pas tout mettre en pourcentage?
Tu erfuse le % pour les div par ce que leur contenu est en taille fixe. Alors passe le reste en % et tu pouras faire de même pour les div.
J'ai toujours été impressionné par le nombre de personnes qui commencent par dire "j'ai pas trop le choix" mais qui finissent par tester autre chôse une fois qu'ils en ont chié pendant des jours sans arriver à régler leur probléme.
Pour moi, la solution la plus compliqué n'est pas souvent la meilleure.
Enfin, bon, zamm c'est à toi de voir ce que tu préfaires tenter.
Marsh Posté le 08-03-2005 à 14:28:43
Bonjour tout le monde !
Est-ce que quelqu'un sait pourquoi screen.width et screen.height fonctionnent sous IE mais pas sous FF ? Question de DOM différent entre FF et IE ? Plus exactement, screen.width me renvoie toujours la même valeur (800), que je sois en 800x600 ou en 1024x768 alors que IE me renvoie la bonne valeur à chaque changement.
Merci !
Z.