Redirection en fonction de définition écran ?
Bonjour
Je voudrais savoir s'il était possible de créer deux versions d'une même page, une écran classique 4:3 et écran widescreen, et d'envoyer le visiteur automatiquement sur celle qui lui convient en fonction de son écran.
Merci de m'éclairer !
Je voudrais savoir s'il était possible de créer deux versions d'une même page, une écran classique 4:3 et écran widescreen, et d'envoyer le visiteur automatiquement sur celle qui lui convient en fonction de son écran.
Merci de m'éclairer !
Configuration: Windows XP Firefox 2.0.0.6
29 réponses
Résumé de la discussion
Créer deux versions d’une même page (4:3 et widescreen) et rediriger automatiquement le visiteur selon sa résolution est au centre du débat, avec des solutions techniques mêlant JavaScript et PHP. Plusieurs réponses proposent d’utiliser PHP et JavaScript pour récupérer la largeur et la hauteur de l’écran (screen.width, screen.height) puis rediriger vers index1.html ou index2.html selon les ratios 4:3, 16:9 ou 16:10. D’autres évoquent des solutions côté serveur avec .htaccess pour des redirections permanentes, en comparaison avec des redirections via des balises meta ou des scripts, et discutent de maintenance et de robustesse. Par ailleurs, certains estiment que deux versions complexifient le site et que l’adaptation dynamique d’images ou de mise en page peut être plus efficace selon le contexte.
-
ContributeurEn PHP et JS oui.
-
Non mais je veux pas faire ça ! Tu pense que c'est possible de changer les images du menu en fonction de screenwidth en HMTL et JS ?
-
ContributeurC'est pas que je pense, c'est que ça l'est.
Tu peux très bien définir une image de fond pour tes balises "a" (liens).
@+ -
Tu pense que c'est possible ?
-
ContributeurSi c'est possible !
-
Bne, non, je peux pas mettre ma police dessus alors.
Mais c'est bon, je garde cette technique, je me suis déjà bien fait chier pour arriver à ça alors...
Si t'as une idée pour ce que je t'ai demandé, t'es le bienvenu, mais sinon je reste comme ça.
@+ -
ContributeurSi justement, en mettant du texte, avec une image par derrière.
-
Donc sans mettre de texte ?
-
Bon j'ai changé un peu (largeur des boutons : 175), mais bon en widescreen c'est toujours aussi ridicule. Please !
-
En widescreen (1280x768) c'est vraiment ridicule : http://www.ensceneassociation.fr/a.jpg
En 1024x768, c'est petit : http://www.ensceneassociation.fr/b.jpg
En ~1152x800 (comme toi), c'est aussi petit : http://www.ensceneassociation.fr/c.jpg
En 800x600, j'ai encore un peu de marge (10px par bouton) : http://www.ensceneassociation.fr/d.jpg
Mais bon voilà j'aimerais bien adapter la taille de mes boutons -
Je suis OK pour faire plusieurs tailles de boutons mais comment je change l'image en fonction de screenwidth ?
-
Re-salut (encore et toujours...)
Ca me tracasse, quand, même, c'est un peu petit.
Pourrais-tu m'écrire un script JS qui calculerait screen.width [moins] 100 [divisé par] 5 [égal] $width
et mettre $width en largeur des boutons
ou alors pour screenwidth=800 => width = 140px
pour screenwidth="1024" => width = 180 px
pour screenwidth="1152 et plus" => width = 200px
?
Merci
@+-
ContributeurMoi je trouve ça bien mais bon...
Pour ce qui est du script, tu as toutes les clés en main. A toi d'essayer maintenant ! En partant des exemples ci-dessus, ça ne devrait pas être trop compliqué...
Mais franchement, tu te compliques la vie pour vraiment pas grand chose.
T'aurais encore meilleurs temps de faire plusieurs tailles de boutons.
Et puis si tu ajustes la largeur en fonction de la résolution, va falloir trouver une hauteur pour que ça ne paraisse pas étiré...
Et de toute façon, ce n'est pas en ajustant la taille en fonction de la résolution que ça va rendre le bouton plus net !
@+
-
-
Regarde : http://www.ensceneassociation.fr/carnet.html
Du premier au cinquième bouton de la ligne, ça fait un peu moins de 800 pixels, et les boutons sont tous petits. Bon, si je les redimensionne, ils sont moins flous mais toujours petits. Regarde une autre page (à part Accueil) pour voir comment c'est normalement (juste les boutons, le reste c'est normal que ça foire) -
C'est trop chiant, je viens de me rendre compte que mon site foirait en 800x600, et quand je l'adapte à cette résol., tout paraît tout petit en 1024x768 ou plus.
Comment tu fais toi ? -
Un autre (encore !) truc : y a t il beaucoup d'internautes en 800x600 ?
-
Je vais pas faire deux versions, ça ira...
Quant au deuxième point, ce n'est pas possible de le réaliser sur une page XHTML ?
Parce que j'ai pas envie de tout changer en .php, même en moins de 5 sec avec NPP !-
ContributeurSi, c'est possible... Mais c'est un peu plus galère ! ^^
Faudrait faire<script language="Javascript"> <!-- document.write('<img src="/image.gif" width='+(screen.width - 100)+' height='+(screen.height - 800)+'/>') //--> </script>
A chaque fois que tu veux insérer une image adaptée à la taille de l'écran.
(screen.width - 100) => pour définir la largeur de l'image (largeur de l'écran - 100 pixels pour éviter d'être collé aux bords)
(screen.height - 800) => si tu veux définir la hauteur de l'image en fonction de la hauteur de l'écran
Si tu ne veux prendre en compte que la largeur de l'écran et saisir une hauteur toi-même :<script language="Javascript"> <!-- document.write('<img src="/image.gif" width='+(screen.width - 100)+' height=SAISIR_LA_HAUTEUR/>') //--> </script>
Il faudra également penser à adapter la hauteur de l'image par rapport à la largeur affectée, sinon l'image sera étirée.
@+
-
-
Largement moins de 5 secondes !
Merci beaucoup pour ton aide !
Un petit truc : penses-tu que ça vaut la peine que je fasse tout mon site en 2 versions ?
Et est-ce possible de régler la largeur d'une image en fonction de la place qu'il reste dans la largeur ?
Thx-
Contributeurpenses-tu que ça vaut la peine que je fasse tout mon site en 2 versions ?
Je ne sais pas...
Perso j'ai toujours fait des sites en une seule version avec une largeur fixe (800 ou 1024)...
Et puis, si tu fais 2 versions, à chaque modif, ça fait 2 pages à changer !
Et est-ce possible de régler la largeur d'une image en fonction de la place qu'il reste dans la largeur ?
Ça doit être possible en utilisant le code qui récupère la largeur de l'écran, non ? ;-)
Sinon après, si tu veux que ton design s'adapte vraiment à la résolution de l'écran, il faut faire un design à taille extensible et non à taille fixe.Un design fixe, c'est un design dont la largeur est de taille fixée (par exemple de 800 pixels). Il y a en général une marge à gauche et à droite, et le contenu du site se trouve au milieu. Un design extensible, c'est un design qui s'élargit automatiquement en fonction de la résolution du visiteur. Si le visiteur est en 1024*768, le design fera 1024 pixels de large. Si le visiteur est en 1600*1200, il fera 1600 pixels de large. (...) La création d'un design extensible est assez complexe. source: Site du Zéro
@+
-
-
ContributeurBah il suffit d'ouvrir tous tes fichiers en même temps dans Notepad++ par exemple et de remplacer <a href="/index.html"> par <a href="/"> dans tous les documents.
Ça ne prend pas plus de 5 secondes ! (4,9 pour saisir le code à remplacer et 0,1 pour remplacer dans tous les documents ouverts)
Je te montre en image.
Ravi d'avoir pu t'aider.
@+ -
Oui, oui, je sais, mais j'ai fait ça pour m'éviter d'avoir à changer tous les liens index, ce qui est assez long. Mais si un jour j'ai le temps, je le ferais et ça sera mieux.
Merci pour ton aide.
@+ -
A non c'est bon ! Dsl !
J'ai mis tout sur une ligne et ça marche :
RedirectPermanent /index.html http://www.ensceneassociation/index.php</code>
Mais est-ce possible de mettre une adresse relative à la place de l'adresse absolue, parce que j'ai essayé et ça marche pas ?-
ContributeurMais est-ce possible de mettre une adresse relative à la place de l'adresse absolue, parce que j'ai essayé et ça marche pas ?
Non, ça ne marche qu'avec des adresses complètes.
Par contre, tes liens vers la page d'accueil peuvent être remplacés par <a href="/">Texte du lien</a> plutôt que d'indiquer explicitement le nom du fichier index.
Comme ça, pas besoin de redirection, c'est le serveur qui se charge de trouver le fichier index de ton site (donc dans ton cas, index.php), de la même manière que lorsque tu accèdes à un site en tapant son adresse, tu ne tapes pas le nom du fichier index et pourtant c'est celui-ci qui s'affiche.
@+
-
- 1
- 2
Suivant
