CSS en fonction de la définition de l'internaute

[OTP]

'soir,

Z'avez un bout de code qui permet le choix du CSS en fonction de la définition d'écran de l'internaute ?

Merci d'avance,

Michaël

 

[e-kiwi]

automatiquement, manuellement, sans rechagement de page,avec rechargement de page ?

 

[Static6000]

e-kiwi le tout à la fois :lol:
Je pense automatiquement!

 

[OTP]

Automatiquement.
Et idéalement sans rechargement.

 

[medium69]

Automatiquement.
Et idéalement sans rechargement.

Il te faut passer par un code en javascript pour détecter la résolution...

Donc rechargement pour la prise en compte ; maintenant, si je me trompe, je suis intéressé par ce code

 

[jcaron]

Z'avez un bout de code qui permet le choix du CSS en fonction de la définition d'écran de l'internaute ?

Si je peux me permettre, ça ne me paraît pas une bonne idée. D'abord parce qu'il y a plus de résolutions possibles que tu ne peux le penser, du 640x480 au 1920x1200 en passant par tout un tas d'autres formats, ensuite parce que résolution d'écran et taille de fenêtre sont deux choses bien différentes, mais aussi parce que tout le monde n'a pas le même réglage de "résolution" (en ppp/dpi), en particuliers sur le écrans avec des résolutions un peu sympa sur lesquels 1px != 1pt...

Sérieusement, quel est vraiment l'intérêt?

Jacques.

 

[OTP]

Donc rechargement pour la prise en compte ; maintenant, si je me trompe, je suis intéressé par ce code

C'est un souci ?

Sérieusement, quel est vraiment l'intérêt?

Permettre aux 800x600 de naviguer sans scroll en bas.
Permettre aux 1280, 1440 et plus d'avoir un site plus aéré.
Pour moi, il y a vraiment un intérêt.

 

[UsagiYojimbo]

Donc rechargement pour la prise en compte ; maintenant, si je me trompe, je suis intéressé par ce code

C'est un souci ?

Sérieusement, quel est vraiment l'intérêt?

Permettre aux 800x600 de naviguer sans scroll en bas.
Permettre aux 1280, 1440 et plus d'avoir un site plus aéré.
Pour moi, il y a vraiment un intérêt.

Le plus simple reste quand même de revoir tes templates de façon à ce qu'ils soient étirables.

 

[OTP]

L'étirement a ses limites. Pour des écrans étroits, je préfère virer une colonne mais pas tout compresser.

 

[UsagiYojimbo]

L'étirement a ses limites. Pour des écrans étroits, je préfère virer une colonne mais pas tout compresser.

C'est un choix aussi.

Ce que tu peux faire, c'est mettre en place un script qui test un certain nombre de réso et affiche le contenu en fonction, et proposer un affichage par défaut dans un cas qui ne serait pas pris en compte.

http://www.commentcamarche.net/faq/sujet-849-php-detecter-la-resolution-d-affichage

Mais il y aura forcément des laissés pour compte.

 

[e-kiwi]

non pas besoin de rechargement de page, car tu peux charger une css en javascript (ou ajax). il te suffit donc de detecter la résolution en js, et de charger la bonne css, et hop, pas de rechargement de page. attention par contre a bien définir tes css, car si tu as un background sur une, et que tu charge l'autre, si tu oublie de mettre background:transparent il va te rester le background de l'autre css

un exemple tout fait avec prototype :
http://www.gallenne.fr/javascript/charg ... quement-16

 

[medium69]

Donc rechargement pour la prise en compte ; maintenant, si je me trompe, je suis intéressé par ce code

C'est un souci ?

Sérieusement, quel est vraiment l'intérêt?

Permettre aux 800x600 de naviguer sans scroll en bas.
Permettre aux 1280, 1440 et plus d'avoir un site plus aéré.
Pour moi, il y a vraiment un intérêt.

Prend garde à une erreur potentielle...

J'ai eu utilisé ce procédé dans le passé. Si je puis me permettre un conseil, il te faut trouver la largeur de la fenêtre du navigateur et non celle de la résolution qui peut être différente.

De plus, suivant les navigateur, il faut compter x pixels pour les barres de scroll.

Bref !

Bien plus de problème qu'un site adaptable à toutes résolution.

Pour ma part, j'ai fait en sorte que mon site soit visible en 800 × 600 :
La largeur minimum du contenu passe dans la largeur 800 ; la largeur minimum contenu + navigation passe en largeur 1024

En déplaçant la barre de scroll à droite, on à accès à tout le contenu pour le 800 × 600, la navigation se trouvant sur la gauche ; un bon compromis quand on sait que cette résolution est en voie de disparition.

De la même manière, la largeur et la hauteur maxi de mes images à été calculée en fonction de cette résolution.

Je reste donc accessible pour toutes les résolutions sans trop de soucis ; bien moins qu'avec mon ancienne méthode qui prenait en compte la résolution

 

[cedric_g]

Bonjour

Euh le but est-il de détecter la résolution de l'écran, ou celle "affichable" par le navigateur ?

Mon 24" affiche 1920x1200 pixels mais il n'est pas rare que j'utilise du multifenêtrage avec des fenêtres limitées à 2/3 voire 1/2 largeur de l'écran :roll:

 

[OTP]

Je compte bien travailler avec les tailles de fenêtre, et non d'écran. Je ne l'ai pas correctement précisé. Je vais regarder les exemples proposés, merci à tous.

 

[jessicatte]

youhouu, bonsoir,

C'est exactement se que j'éssaie en vain de faire ,perso je voudrais changer l'image de mon header selon la taille de la fenetre du navigateur
en passant par un chragement css.
Pour l'instant j'arrive a le faire avec un code javascript qui détecte la resolution, mais il serait bien plus judicieu
de détécter la taille de la fenetre et de charger un css en fonction car la il ya des resolution 1920x1080 sur des 19pouces et la ca fais mal!

Si il y a la moindre piste, je suis preneuse


Merci a ceux qui éssaieront de maider,


Jessicat

 

[vitalizo]

a ce sujet, ya un site qui permet de voir ce que donne un site suivnat plusieurs résos?

sur mon 17" je peux aller qu'a 1280, donc si je pouvais voir ce que ca donne avec des résos plus hautes,


merci

 

[medium69]

Je ne me sert plus de ceci, mais si je me rappelle bien, je passais par JavaScript pour la détection de la largeur de la fenêtre, et je faisais une redirection avec les bon fichiers.

 

[jessicatte]

detecter la taille de la fenetre et redimensionner a la vollé avec php avec

document.getElementById('id').offestHeight
et
document.getElementById('id').offestWidth

mais je n'y arrive pas encor donc si kelkun à déja vu ca..

 

[clauce]

Salut OTP,
salut tout le monde,

au cas où tu n'aurais pas trouvé ton bonheur...
Pour mon site (wa1pdesign.fr - remplacer le "1" par un "i"), j'ai bricolé ce petit code :

var content = document.getElementById('accueil');
var hauteur_page;
var hauteur_div;
var largeur_div;
	
// détection IE6
var IE6 = false
var strChUserAgent = navigator.userAgent;
var intSplitStart = strChUserAgent.indexOf("(",0);
var intSplitEnd = strChUserAgent.indexOf(")",0);
var strChMid = strChUserAgent.substring(intSplitStart, intSplitEnd);
	//

if( typeof( window.innerWidth ) == 'number' ) {
	hauteur_page = window.innerHeight;
	hauteur_div = content.offsetHeight;
	largeur_div = content.offsetWidth; 
}
else if( document.documentElement && document.documentElement.clientHeight ) {
	hauteur_page = document.documentElement.clientHeight;
	hauteur_div = content.offsetHeight; 
	largeur_div = content.offsetWidth; 
}

J'espère que ça pourra t'aider...

 

[OTP]

Merci.
Perso je ne cherche plus mais je pense que ça aidera certains.