27801 sujets

CSS et mise en forme, CSS3

Pages :
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)
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)
Il n'y a pas une option "version pour ordi" cochée ? Ou alors une option zoom modifiée (sur desktop c'est possible, mais sur mobile je ne crois pas) ?
Modérateur
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.
Modérateur
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
Modérateur
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 Smiley cligne
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 Smiley cligne


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 Smiley cligne


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 !
Par contre c'est la seconde page qui semble avoir pris l'aspect de la première donc a priori ça ne vient pas du -webkit-font-smoothing enlevé sur la première mais d'une modif faite à la seconde...
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 !...
Modérateur
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 Smiley smile
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 Smiley smile


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)
Modérateur
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)
Modérateur
Voici ce que j'ai avec chrome et mon samsung upload/1651075254-2857-screenshot20220427-174838chrom.jpg
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)