[Résolu] Police serif android change de taille d'une page à l'autre

Salut

Soit ces deux pages :
https://codepen.io/kerlutinoec/pen/rNpRKKK
https://codepen.io/kerlutinoec/pen/BaJbVqQ

La première page mène à la seconde avec un lien "en lire plus" ; le début en commun étant sensé se présenter strictement pareil.

Mais sur la seconde page le sous-titre et le paragraphe apparaissent avec une police plus grande et ce uniquement sur chrome sur un mobile android avec la police serif du système (cela ne pose pas de problème sur firefox ni quand Garamond est chargé).

Quelqu'un saurait il me dire pourquoi ?
Modifié par kerlutinoec (21 Apr 2022 - 16:47)

Bonjour. J'ai vérifié et je n'ai pas trouvé de différence de taille de font sous chrome/android...

Olivier C a écrit :
Bonjour. J'ai vérifié et je n'ai pas trouvé de différence de taille de font sous chrome/android...

Bizarre !
Pourquoi ça fait ça sur le mien ? Faut que je teste un autre appareil android ! (La différence est subtile et se voit au niveau du nombre de lettre par ligne notamment)

http://fra.free.fr/Screenshot_2022-04-22-15-27-50-778_com.android.chrome.png
vs
http://fra.free.fr/Screenshot_2022-04-22-15-28-22-103_com.android.chrome.png
Modifié par kerlutinoec (22 Apr 2022 - 15:38)

Version pour ordi non cochée.
Pas trouvé de zoom.

Cela pourrait il avoir un rapport avec ça :
https://stackoverflow.com/questions/11289166/chrome-on-android-resizes-font

Juste en passant, sur tes deux screenshot, il y a (ou pas) un onmouseover , qui aurait peut-être une incidence sur le rendu (reflow forcé / recalcul de l'affichage pour marque la zone concernée ) ?

gcyrillus a écrit :
Juste en passant, sur tes deux screenshot, il y a (ou pas) un onmouseover , qui aurait peut-être une incidence sur le rendu (reflow forcé / recalcul de l'affichage pour marque la zone concernée ) ?

Je vais tenter de l'enlever ; il ne sert plus à rien d'ailleurs.

Bonjour,

en y regardant de plus prés, les feuilles de styles différent aussi. Il y a par exemple : -webkit-font-smoothing: subpixel-antialiased; qui me semblerait bien être la raison de cette difference .


Cdt

Je vais uniformiser tout ça. Mais on voit clairement que c'est la taille qui diffère.

kerlutinoec a écrit :
Je vais uniformiser tout ça. Mais on voit clairement que c'est la taille qui diffère.

Je ne le vois que dans chrome android pour ma part sur un smartphone SamSung , et en enlevant le font-smoothing avec les sub pixels , plus de différence

gcyrillus a écrit :

Je ne le vois que dans chrome android pour ma part sur un smartphone SamSung , et en enlevant le font-smoothing avec les sub pixels , plus de différence

Merci pour le test ! Je vais faire pareil des deux côtés.

gcyrillus a écrit :

Je ne le vois que dans chrome android pour ma part sur un smartphone SamSung , et en enlevant le font-smoothing avec les sub pixels , plus de différence

J'ai corrigé selon tes indications... Eh bein pour moi ça ne résoud pas le problème !
J'ai essayé en enlevant le

-webkit-font-smoothing: subpixel-antialiased;

sur la première page ; j'ai essayé en l'ajoutant à la seconde ; j'ai aussi viré le

onmouseover

; j'ai ajouté un

height: 100%; width: 100%;

à la seconde page qui n'en avait pas ; j'ai même tenté un

text-size-adjust: 100%;

sur les 2 pages ; j'ai bien pris soin à chaque fois de vider le cache/historique de Chrome et j'ai même alterné entre 4G et wifi : c'est toujours pareil, enfin différent !
Je pense que je vais laisser tomber ! Chrome c'est le nouveau Internet Explorer ! (troll detected)

kerlutinoec a écrit :


J'ai corrigé selon tes indications... Eh bein pour moi ça ne résoud pas le problème !
J'ai essayé en enlevant le

-webkit-font-smoothing: subpixel-antialiased;

sur la première page ; j'ai essayé en l'ajoutant à la seconde ; j'ai aussi viré le

onmouseover

; j'ai ajouté un

height: 100%; width: 100%;

à la seconde page qui n'en avait pas ; j'ai même tenté un

text-size-adjust: 100%;

sur les 2 pages ; j'ai bien pris soin à chaque fois de vider le cache/historique de Chrome et j'ai même alterné entre 4G et wifi : c'est toujours pareil, enfin différent !
Je pense que je vais laisser tomber ! Chrome c'est le nouveau Internet Explorer ! (troll detected)

Fichtre !
Sur le codepen ça résoud le problème et pas sur ma vrai page !
Qu'est-ce que j'ai pu raté ?
L'enquête reprend !

Ce qui fait la différence sur le codepen c'est le

body, html { height: 100%; width: 100%; }

; mais ça n'a pas d'effet sur ma vrai page !...

gcyrillus a écrit :
Bonjour,

je n'ai testé qu'en ligne sur les codepen où il n'y a pas de reset CSS , peut-être en as tu un sur tes vrai pages

Nan, pas de reset CSS.
Bon je poste l'url réel même si j'aime pas trop faire ça : monplombier27.fr (la boite de plomberie de mon frérot).
Si, par exemple, tu choisis dans le menu : Informations > Le chauffe eau solaire, tu arrives à la seconde page en cliquant sur "en savoir plus...". En théorie on doit juste avoir l'impression que la page s'est agrandie avec le début parfaitement identique. Mais sur Chrome/Android le texte grossit.
Modifié par kerlutinoec (26 Apr 2022 - 09:03)

Bonjour,

je n'avais pas remarqué ton dernier post.

Sur les deux pages, la structure est différente malgré des styles identiques pour les font. un h2 pour un h1 et un span pour un h2, le p, quant à , il est pareil. Je vois pas ce qui peut provoqué cette difference. As tu essayé des rem au lieu des em ou une valeur fixe en pixel pour voir si cela venait que du navigateur ?

cdt

Les h2 qui deviennent des h1 c'est volontaire. La première page présente un extrait de la seconde. Normalement le CSS est censé corriger les différences. Le <p> ne devrait pas changer quant à lui. Je vais tenter les rem, mais les px se sera juste pour test.

As tu constaté le problème sur ton Samsung ? Moi je n'ai qu'un seul appareil android à dispo pour les tests (Mi9T).
Modifié par kerlutinoec (27 Apr 2022 - 16:40)

Voici ce que j'ai avec chrome et mon samsung
A gauche la page seule, la difference est à peine visible et n'est pas remarquable à l'oeil en naviguant. Cela ne concerne que la marge avec le titre et soustitre.

si sur les codepen , j'arrivais à percevoir une difference avec chrome, la ce n'est pas le cas, pour préciser.

cdt
Modifié par gcyrillus (27 Apr 2022 - 18:32)