Passer au contenu

JavaScript : adapter sa page Web à la définition de l’écran des internautes

Comment : en faisant appel à la méthode screen.Vous avez créé plusieurs versions de votre site Web, chacune avec des éléments spécifiques à la définition de…

Comment : en faisant appel à la méthode screen.Vous avez créé plusieurs versions de votre site Web, chacune avec des éléments spécifiques à la définition de l’écran du PC des internautes (taille des tableaux, des animations Flash, etc.). Or, tous les visiteurs ne connaissent pas la définition de leur écran et ne sauront pas choisir la version adéquate. Pour les aider, vous allez créer un script qui déterminera cette définition et affichera automatiquement sur l’ordinateur du surfeur la version du site la plus adaptée. Vous afficherez la page index640.htm, si cette définition est de 640 x 480 points ; ou la page index800.htm, si elle est de 800 x 600 points. JavaScript dispose pour cela des méthodes screen.height et screen.width. Elles permettent de récupérer des informations sur la hauteur et la largeur de l’écran. A l’aide d’un éditeur HTML, ouvrez le fichier correspondant à votre page d’accueil, index.htm ou default.htm dans la majorité des cas. Recopiez-y le contenu du listing ci-contre. Trois définitions d’écran sont ici prises en compte, libre à vous d’en ajouter en insérant d’autres conditions dans la boucle if. Lorsqu’une définition est détectée, le chemin du fichier vers lequel doit être dirigé l’utilisateur est ajouté à la variable fichier. Il peut cependant arriver qu’une définition non standard ne soit pas reconnue. Pour éviter que les visiteurs ne se retrouvent alors sur une page blanche, il suffit de créer une version générique de votre site, accessible par la page indexall.htm.

🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.


La rédaction