Redirection en fonction de définition écran ?
Mysterious_fea
Messages postés
406
Statut
Membre
-
dcanl Messages postés 3004 Date d'inscription Statut Contributeur Dernière intervention -
dcanl Messages postés 3004 Date d'inscription Statut Contributeur Dernière intervention -
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
- 1
- 2
Suivant
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.
-
Merci BEAUCOUP BEAUCOUP BEAUCOUP .... !
Tout marche bien, je te remercie encore.
J'ai donc fait un index.php avec le code suivant :
<?php if(!isset($_GET['r'])) { echo "<script language=\"JavaScript\"> <!-- document.location=\"$PHP_SELF?r=1&Largeur=\"+screen.width+\"&Hauteur=\"+screen.height; //--> </script>"; } else { $Ratio=$_GET['Largeur']/$_GET['Hauteur']; if($Ratio==16/10) { echo "<script language=\"JavaScript\"> <!-- document.location=\"index2.html\"; //--> </script>"; } elseif ($Ratio==16/9) { echo "<script language=\"JavaScript\"> <!-- document.location=\"index2.html\"; //--> </script>"; } elseif ($Ratio==4/3) { echo "<script language=\"JavaScript\"> <!-- document.location=\"index1.html\"; //--> </script>"; } else { echo "<script language=\"JavaScript\"> <!-- document.location=\"index1.html\"; //--> </script>"; } } ?>
Et donc créé deux pages d'accueil : index1.html pour l'écran classique, index2.html pour l'écran wide. Et tous les liens qui pointent vers l'accueil à l'intérieur du site ne posent pas de problème car, pour éviter de tous les changer de "index.html" en "index.php", j'ai créé une page index.html avec une redirection par les balises meta vers "index.php", et l'opération se répète.
Juste un petit truc : il me semble qu'on peut effectuer des redirections permanentes avec le fichier .htaccess : ça serait plus propre que la redirection par les meta que j'ai effectuée.
Comment fait-on stp ?
Merci, merci, merci et merci encore. -
Salut !
Regarde ici : PHP Détecter la résolution d'affichage - La solution
@+ -
Merci mais je m'y connais pas tellement en PHP.
Je pense qu'il faudrait pas partir sur la condition largeur={1024 ou 1280}
mais plutôt calculer le rapport width/height, mettons $rapport
if $rapport = 4/3 then redirection vers index_classique.html
if $rapport = 16/10 then redirection vers index_wide.html
Voilà il faut partir dans un truc comme ça mais je sais pas du tout le coder proprement donc si quelqu'un peut m'aider, il est le bienvenu !
Merci encore dcanl
Ciao -
Salut.
Ben suffit de calculer screen.width/screen.height puis de comparer avec 4/3 ou 16/10
C'est surtout du javascript (en tout cas pour la récupération de la résolution), pas trop du PHP, vu que ce langage ne peut pas récupérer la résolution lui-même.
@+ -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
Ben justement j'y connais rien à la programmation php ou js.
Tu te sens pas de me le programmer stp si c'est simple ?
Merci -
Et bien c'est le moment de t'y mettre !! ;-)
Mais je suis bon. (oui, merci, mes chevilles vont bien :D)
<?php if(!isset($_GET['r'])) { echo "<script language=\"JavaScript\"> <!-- document.location=\"$PHP_SELF?r=1&Largeur=\"+screen.width+\"&Hauteur=\"+screen.height; //--> </script>"; } else { $Ratio=$_GET['Largeur']/$_GET['Hauteur']; if($Ratio==16/10) { echo("16/10"); } elseif ($Ratio==16/9) { echo("16/9"); } elseif ($Ratio==4/3) { echo("4/3"); } else { echo("Autre résolution ou résolution non détectée"); } } ?>
Les echo("16/10"); etc... c'est pour tester le fonctionnement (ça affiche le ratio détecté).
@+ -
Merci beaucoup. Mais je n'ai pas trouvé ce qu'il faut mettre à la place de echo("X") pour faire une redirection.
J'ai essayé un script PHP :header( "Status: 301 Moved Permanently", false, 301); header( "Location: http://www.votresite.com/unepage.htm"); exit();
Un JS :
window.location.replace( "http://www.un-site.com/une-page.htm");
Mais rien ne marche. Ca doit être super simple mais bon...si tu me le disais ça serait simpa !
Merci ! -
Re.
Faut un mélange de PHP et de JS. ^^
Remplace-les parecho "<script language=\"JavaScript\"> <!-- document.location=\"emplacement_de_la_page_souhaitée\"; //--> </script>";
@+ -
J'ai cherché un peu par moi même (pour une fois !^^), mais ce que j'ai mis ne marche pas :
Dans .htaccess :
RedirectPermanent /index.html /index.php
J'ai aussi essayé :RedirectPermanent /index.html http://www.ensceneassociation/index.php
Mais ça marche pas ! -
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 ?-
Mais 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.
@+
-
-
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.
@+ -
Bah 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.
@+ -
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-
penses-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
@+
-
-
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 !-
Si, 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.
@+
-
-
Un autre (encore !) truc : y a t il beaucoup d'internautes en 800x600 ?
-
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 ? -
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) -
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
@+-
Moi 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 !
@+
-
-
Je suis OK pour faire plusieurs tailles de boutons mais comment je change l'image en fonction de screenwidth ?
-
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
- 1
- 2
Suivant
