Il peut être intéressant de détecter la résolution d'écran d'un visiteur. Malheureusement, cette information n'est pas disponible directement en php, il faut utiliser du javascript. Nous allons voir comment faire, puis comment transmettre cette information à du code php.

1- Détecter la résolution en javascript

En javascript, la résolution d'écran peut être récupérée à l'aide des propriétés width et height de l'objet screen.

screen.width
screen.height

L'objet screen possède également d'autres propriétés, en Voici la liste :

PropriétéDescription
availHeightHauteur d'écran disponible pour la fenêtre du navigateur. Exclue donc par exemple la hauteur de la barre des tâches windows, lorsque elle est fixe.
availWidthLargeur d'écran disponible pour la fenêtre du navigateur. Exclue donc par exemple la largeur d'ICQ, lorsque la barre est fixée en largeur.
colorDepthNombre de bits de la palette de couleurs utilisée (16 bits = 65536 couleurs)
heightHauteur de l'écran.
widthLargeur de l'écran.

Exemple :

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. <!-- debut
  5. function resolution() {
  6.  alert(
  7.   "Vous etes en résolution : "+screen.width+"*"+screen.height
  8.   +"\nTaille d'écran disponible : "+screen.availWidth+"*"+screen.availHeight
  9.   +"\nPalette de couleurs : "+screen.colorDepth+" bits"
  10.  );
  11. }
  12. // fin -->
  13. </script>
  14. </head>
  15. <body onload="resolution();">
  16. </body>
  17. </html>

2- La transmettre à du code PHP

Nous savons maintenant récupérer les informations en javascript. Il reste donc à les transmettre à du code PHP. Rien de plus simple, il suffit de faire une redirection.

Voici le nouveau code, de l'exemple ci dessus.

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. <!-- debut
  5. function resolution() {
  6.   document.location="<?php echo $_SERVER['PHP_SELF']; ?>?width="+screen.width+"&height="+screen.height;
  7. }
  8. // fin -->
  9. </script>
  10. </head>
  11. <?php
  12. if(!isset($_GET['width']) and !isset($_GET['height'])){
  13.   echo '<body onload="resolution();">';
  14. }else{
  15.   echo '<body>';
  16.   echo 'Votre résolution est ' . $_GET['width'] . ' * ' . $_GET['height'];
  17. }
  18. ?>
  19. </body>
  20. </html>