Discussion :

[inspecteur rick]

Bonjour

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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"


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.

[Invité]

Bonjour,

ça aiderait d'avoir une page en ligne...

[inspecteur rick]

Bonjour

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

Merci

[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 ?

[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 ?

[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 %)

[inspecteur rick]

Salut !

En fait j'ai défini un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...