Détecter la résolution d'écran du visiteur

Il fut un temps où les écrans de 14 et de 15 pouces étaient pratiquement les seuls utilisés sur la toile.

Avec l'explosion des ventes d'écrans de dimensions plus élevées, les résolutions adoptées par les visiteurs du Web sont maintenant très variées et il est légitime, pour tout concepteur de site, d'espérer une lecture de son "oeuvre" dans les meilleures conditions. Comme la presque totalité des sites sont conçus pour une seule résolution d'affichage, il peut être intéressant d'attirer l'attention du visiteur sur ce détail qui peut parfois avoir beaucoup d'importance. Ce peut être le cas, notamment, lorsque les pages contiennent des graphiques ou des images de grande dimension. Voici donc un petit script qui va permettre de rappeler à l'ordre (si l'on peut dire : le visiteur fait ce qu'il veut, après tout ...) si le besoin s'en fait sentir.

En arrivant ici, vous n'avez peut être pas vu d'avertissement : c'est que vous avez une résolution d'écran de 800 x 600 pixels. Ce site est, en effet, optimisé dans ce sens. Si vous désirez voir l'effet obtenu par le script que je vous propose, passez dans une autre résolution !

En voici le code :

<script type="text/javascript" language="JavaScript">

var correctwidth=800

var correctheight=600

if (screen.width!=correctwidth||screen.height!=correctheight)

document.write("<b>Ce site est optimisé pour une résolution "+correctwidth+"x"+correctheight+".
                          Votre résolution actuelle est "+screen.width+"x"+screen.height+".</b>")

</script>

Réduit à sa plus simple expression, ce petit script comporte deux variables suivie d'une condition dont le texte de résultat s'affichera s'il y a lieu. Vous avez la possibilité de régler en :

Ce n'est pas tout : vous avez remarqué une balise HTML en rouge :<b> et sa fermeture. Dans ce cas, le texte affiché sera en "gras". La présence de cette balise vous laisse deviner que vous pouvez paramétrer cette partie afin d'obtenir un affichage personnalisé. Pour ce faire, les feuilles de style (allez donc voir dans cette rubrique !) vous offriront la possibilité de choisir la police, la couleur, la dimension, l'encadrement éventuel, etc. Si, à votre arrivée sur cette page, votre résolution d'écran ne correspondait pas à mon attente, vous avez pu observer le résultat d'un tel usage.

Dernier détail : vous écrirez la totalité de ce script (en code source !) à l'endroit précis où il doit apparaître.

Il existe aussi une solution de redirection automatique pour les courageux ayant écrit deux versions de leur site en fonction de deux résolutions d'écran différentes, voire plus ... Si la chose vous intéresse, allez dont voir l'exposé Redirections automatiques !

retour