Mobile Desktop CSS comportement différent

Version imprimable

14/08/2018, 20h53
inspecteur rick

1 pièce(s) jointe(s)

Mobile Desktop CSS comportement différent
Bonjour

J'ai une page html avec un feuille de style css que je simplifie ici :
Code:

1 2 3 4 <div class="content"> <div class="trad"></div> </div>
Code:

1 2 3 4 5 6 7 .content { font-size : 15px; } .trad { font-size : inherit; }
Sur Edge/Chrome/Firefox (dernière version), je n'ai aucun problème. Je passe sous Android 6 et Chrome 68, je n'ai pas de problème sauf si je passe en "Version Ordinateur".
Ma class "trad" et ma class "content" ne s'affiche pas avec la même taille de font. J'ai lancé le mode debug USB pour avoir accès à l'inspecteur sous Android

Class "content"
Pièce jointe 403820

J'en perds mon latin, je ne comprends pas d'où sort ce 43 px ?? Alors que la propriété CSS est bien indiquée comme 15 px !!

Une idée.
Merci d'avance.
15/08/2018, 16h15
Invité

Bonjour,

ça aiderait d'avoir une page en ligne...
17/08/2018, 20h44
inspecteur rick

Bonjour

Je peux fournir en PV le lien vers la page en ligne si quelqu'un veut regarder :)

Merci :)
22/08/2018, 19h38
inspecteur rick

J'ai oublié dans ma simplification que la class "Trad" a un "display" en "inline-block"

Si je l'enlève, alors le problème de font-size différent disparaît....C'est normal ?
23/08/2018, 16h26
inspecteur rick

Je progresse dans l’identification du problème..

Sur le mobile en "version ordinateur", le navigateur semble appliquer un zoom sur le font-size puisque un "text-size-adjust: none" annule l'augmentation du font-size.
Mais ce zoom ne s'applique pas à mes span qui sont en inline-block

J'aimerai garder le zoom de la "version ordinateur" mais qu'il s'applique à tous les éléments y compris aux span en inline-block...

Une idée ?
01/09/2018, 10h50
Invité
Bonjour,

je ne sais pas si tu as résolu ton problème, mais :
- en "responsive", définir la taille des fonts (font-size) en pixel n'est pas une bonne idée.
- il existe des unités plus adaptées : em, rem,... (ou %)
01/09/2018, 21h48
inspecteur rick
Salut !

En fait j'ai défini un
Code:

1 2 3 4 5 6 7 html { font-size:16px; text-size-adjust: 100%; -moz-text-size-adjust : 100%; -webkit-text-size-adjust : 100%; -ms-text-size-adjust : 100%; }
Comme ca "version ordinateur" de chrome Android ne modifie pas le font-size aléatoirement...
Mais j'ai pas compris le fonctionnement de cette "version ordinateur" qui change le font-size génral sauf celui des inline-block...