Bonjour à tous !
Cherchant à rendre un site le plus fluide possible, j'essaye d'adapter la présentation en fonction de la taille des caractères.
L'idée est de faciliter la lecture des utilisateurs dont l'espace d'affichage de la page est large de moins de 30 caractères (par exemple).
Pour l'instant, j'obtient le rapport taille d'un caractère/taille de l'espace d'affichage de la manière suivante :
1) calcul de la largeur de l'espace d'affichage avec "document.body.offsetWidth" juste avant la balise de fermeture </body>
2) calcul de la largeur d'un caractère avec un M majuscule en l'entourant d'un span et d'un identifiant ("m"), puis avec "document.getElementById("m").offsetWidth"
3) diviser la taille d'un caractère par la taille de l'espace d'affichage pour connaitre le nombre de caractères qu'il est possible d'afficher sans retour à la ligne.
Bien sur, il s'agit d'une approximation, puisque le M majuscule est beaucoup plus large que le i minuscule par exemple.
Si le visiteur redimensionne sa fenêtre, on peut refaire le calcul grâce à <body onresize="calcul()">.
Par contre, il y a plusieurs problèmes que je n'arrive pas à résoudre :
1) Par défaut, dans firefox, CTRL MAJ + augmente de façon bizarre la taille du texte. En effet, le nombre de pixels donnés par offsetWidth ne change pas. C'est affiché sur le même nombre de pixels mais les pixels sont plus gros. Donc il faudrait arriver à avoir la taille en centimètres ou en millimètres. Ce problème est secondaire car il y a un moyen de n'augmenter que la taille du texte et dans ce cas là, offsetWidth renvoie le vrai nombre de pixels.
2) Si l'utilisateur augmente la taille de la police (sans zoomer) après le chargement de la page, je n'ai aucun moyen de le détecter pour ajuster la présentation. Il n'y a pas d'attribut du style <body onfontresize=""> ... donc je suis coincé. A part mettre une minuterie qui vérifie toute les secondes mais c'est vraiment sale, je ne le ferait pas. Ca c'est un gros problème pour moi.
Quelqu'un aurait une piste ?
Partager