Surprise hier, en affichant mon blog sur le smartphone, j’avais un espace à droite inutilisé :
Manifestement, la partie « web responsive » détectait mal la largeur de l’écran, mais pourquoi ? Je n’ai pas fait de modifications sur le thème récemment, je ne comprenais donc pas trop d’où pouvait venir le problème.
J’ai commencé par vider le cache du navigateur et recharger la page, sans changement. Puis j’ai installé un autre navigateur sur le smartphone : idem, le problème persistait. Ce matin, j’ai donc commencé à regarder cela de plus près, et j’ai été assez heureux puisque j’ai vite trouvé comment corriger ce problème, même si je ne maîtrise pas le sujet…
Webusb debuging
Le premier problème, c’est de trouver comment trouver les outils développeurs. Je me souvenais l’avoir fait une fois avec le navigateur chromium (c’est plus simple qu’avec Firefox), j’ai donc pu retrouver facilement la manip : il faut activer le débogage USB sur le smartphone, puis dans le navigateur taper chrome://inspect#devices dans la barre d’adresse. Après avoir accepté la clef de chiffrement, l’appareil s’affiche, ainsi que la ou les page(s) web ouvertes :
Il ne reste plus qu’à cliquer sur inspect, et on accède aux outils de dev comme sur le PC : je retrouve donc ma page d’accueil mal affichée, et remarque assez vite cette ligne dans la section <head> de la page html :
En remplaçant la valeur device-width par une valeur numérique, je vois que j’impacte bien la largeur de l’affichage sur l’écran du portable. Je vais alors chercher un peu sur le web des infos sur ce meta name="viewport", et trouve cette page. Je vois que leur exemple est légèrement différent de ma ligne :
<meta name="viewport" content="width=device-width, initial-scale=1.0"\>
Alors que ma ligne se limite à :
<meta name="viewport" content="width=device-width"\>
Sans trop chercher à creuser, j’ajoute ce second paramètre qui m’a l’air de faire sens par rapport à mon problème, et l’affichage redevient correct :
Parfait, reste à trouver et modifier le fichier correspondant côté wordpress. Il s’agit du fichier header.php dans le dossier du thème actif.
Astuce
J’ai aussi appris que pour afficher le code source de la page côté mobile, il suffit d’ajouter view-source: avant l’adresse du site visité :
Conclusion
Je ne sais pas trop d’où est venu ce problème, je ne l’avais jamais remarqué avant, c’est donc forcément assez récent. De ce que j’ai lu sur la page d’explication à propos de la notion de viewport, c’est probablement à la suite d’une mise à jour d’Android et/ou du navigateur Vanadium qu’utilise GrapheneOS.
Mais voilà un problème de réglé rapidement, et j’avoue avoir eu de la chance de tomber immédiatement sur la bonne ligne et le bon paramètre… Cela compensera les fois où je passe des heures à trouver la solution ! 😎