Détection automatique de la résolution

Tutoriaux > Javascript > Détection automatique de la résolution

Et redirection vers la page optimisée

Quelquefois, il peut être interessant de pouvoir afficher une page ou une autre en fonction de la résolution du visiteur.
Mais il semble un peu ridicule de mettre un bouton ou un lien avec chaque résolution, surtout qu'une partie des visiteurs ne savent même pas ce qu'est leur résolution.
Pour faire une détection automatique, c'est assez simple, il suffit de créer un fichier intermédiaire, c'est à dire qui redirigera sur chaque fichier désiré, en fonction des résolutions. Il faut alors y insérer dans les balises <head> le scipt suivant:

Code

<SCRIPT LANGUAGE="JavaScript1.2">
var largeur=screen.width
var hauteur=screen.height
if(largeur==640 && hauteur==480) {url="index640.htm";}
else if(largeur==800 && hauteur==600) {url="index800.htm";}
else if(largeur==1024 && hauteur==768) {url="index1024.htm";}
else if(largeur>=1280 && hauteur==1024) {url="index1280.htm";}
else if(largeur>=1600 && hauteur>=1200) {url="index1600.htm";}
else {url="index1024.htm";}
window.location.replace(url);
</SCRIPT>

Il suffit de remplacer dans largeur et hauteur la résolution désirée et après url le fichier vers lequel ça va rediriger.

Code des signes d'égalité et d'inégalité:

Code

== signifie égale
>= signifie supérieur ou égale
<= signifie inférieur ou égale
< signifie inférieur strictement
> signifie supérieur strictement
!= signifie différent de

Pour que le script s'applique à l'ouverture de la page, il faut le lui dire dans les balises <body>:

Code

Avec ce script, la redirection se fera à l'ouverture de la page.
Il est conseillé de ne rien mettre dans cette page, de toutes façons cela n'aura pas le temps d'être affiché.

Par 1 , Le 20 Mars 2005 à 16h56
Ce tutoriel est la propriété d'Aidoweb et ne peut en aucun cas être copié.

Retour à Javascript

Ajouter un commentaire

Lectures recommandées

Commentaires sur cet article

Orgnobi - Le 10 Juin 2006 à 13h11

Faire ca en javascript c'est un peut foireux...
Il faut créer une page pour chaque résolution et en plus, on a pas toutes les resolutions...
La meilleure des solutions c'est d'avoir une seule page d'index codée correctement avec un css corect et la, plus de problème de résolution...

Tutoriaux > Javascript > Détection automatique de la résolution