Pourquoi le texte de paragraphe est-il réduit dans Chrome for Mobile?

Le problème se produit sur Chrome/Android et éventuellement Chrome sur d'autres appareils mobiles. Je n'ai été capable de le tester sur un Nexus 5x jusqu'à présent. J'utilise Handlebars.js pour afficher dynamiquement des guillemets dans les balises de paragraphe. Chaque fois que la citation affichée est inférieure à trois lignes, la taille de la police diminue. J'ai du mal à déboguer ce problème de taille de police car cela semble se produire uniquement sur Chrome for Mobile. Le problème ne réplique pas en mode de développement d'outils de développement Chrome. Le redimensionnement de police ne se produit pas dans IOS Safari ou Firefox Mobile.Pourquoi le texte de paragraphe est-il réduit dans Chrome for Mobile?

Si vous avez Chrome sur un appareil mobile, pourriez-vous parcourir le jeu et voir si vous remarquez le problème? LINK HERE

Voici une vidéo montrant le changement de taille de la police: video of problem

Voici côte à côte deux photos qui illustrent le problème. Font dans l'image à gauche est plus grande que la police en bonne image:

Voici le code de cette section du site (link to repository):

#game-screen { margin-top: 2%; @media (max-width: 550px) { margin-top: 4%; } #game-quotes { width: 90%; margin: 0 auto; @media (max-width: 550px) { width: 95%; } p { font-size: 3.6rem; @media (max-width: 750px) { font-size: 2.4rem; } @media (max-width: 550px) { font-size: 1.4rem; } } } }

<div id="game-screen"> <div id="game-pictures"> </div> <div id="game-quotes"> <h6 class="center">Quote {{counter}}/10</h6> <p>"{{content}}"</p> </div> </div>

Est-ce que quelqu'un a une idée de ce qui pourrait causer ce redimensionnement des polices?

Merci d'avance si vous pouvez offrir de l'aide.

Link to Repository

Edit: Merci à vous tous qui m'a aidé!

Source

2017-10-01 Joel Hoelting

Intéressant. Avez-vous essayé d'utiliser d'autres unités pour la taille de la police? 'px' par exemple? – Morpheus

J'ai regardé votre site Web, je ne suis pas capable de signaler le problème. Pouvez-vous s'il vous plaît effacer dans le meilleur sens? –

@Morpheus: px fait toujours la même chose, il doit y avoir d'autres thats css qui causent cela mais pourquoi seulement sur Chrome mobile? –

Pouvez-vous vérifier si la taille de votre police Chrome est à 100% dans les paramètres de votre téléphone? Chrome pour Android a une option pour afficher la police à une valeur différente. Vous pouvez trouver cette option dans: Menu -> Paramètres -> Accessibilité. J'ai fait une erreur comme celle-ci il y a quelques semaines et je veux être sûr que ce n'est pas le cas ici. Désolé si je suis hors de la ligne ici.

J'ai également constaté que, pour une raison inconnue, Chrome pour Android ne configurait pas correctement ce paramètre lors de l'installation. Je ne pouvais pas reproduire ce comportement, mais j'ai un téléphone, un parent, donc il est possible que vous ne soyez pas conscient du fait que ce paramètre n'est pas défini à 100%.

Source

2017-10-12 07:54:44 Cheesy

J'ai ajouté un * après votre sélecteur de paragraphe pour sélectionner tous les paragraphes. peut-être que cela va résoudre votre problème. s'il vous plaît me dire si ça a marché, je veux connaître le résultat :)

#game-screen { 
 
    margin-top: 2%; 
 
    @media (max-width: 550px) { 
 
    margin-top: 4%; 
 
    } 
 
    #game-quotes { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    @media (max-width: 550px) { 
 
     width: 95%; 
 
    } 
 
    p *{ 
 
     font-size: 3.6rem; 
 
     @media (max-width: 750px) { 
 
     font-size: 2.4rem; 
 
     } 
 
     @media (max-width: 550px) { 
 
     font-size: 1.4rem; 
 
     } 
 
    } 
 
    } 
 
}

Source

2017-10-06 13:58:30 MultiDutch

Cela n'a eu aucun effet. Étiez-vous capable de reproduire le problème sur mobile Chrome? –

'J'ai ajouté un * après votre sélecteur de paragraphe pour sélectionner tous les paragraphes' .... Ce n'est pas ce que * fait. https://css-tricks.com/almanac/selectors/u/universal/ –

Je ne sais pas si cela est la réponse à votre question, mais je trouve cela cohérent pour CSS:

body { 
    /** Setting the 'font-size' property of the <body> to 62.5% 
    * allows you to use the 'em' measurement as you would in 'px' form. 
    * ...hope that's clear. 
    */ 
    font-size: 62.5%; 
} 

#someDivInBody { 
    font-size: 1.65em; /* or '16.5px' by CSS */ 
}

Cette méthode m'a permis d'utiliser la mesure em comme je le ferais en px mais avec plus de cohérence et de contrôle.

Source

2017-10-07 15:22:48 Oluwafunmito

L'unité rem est différente de px ou em. Lorsque vous redimensionnez la fenêtre, l'utilisation de rem conserve le même rapport entre le texte et la taille de la fenêtre. Essayez d'utiliser em ou px pour résoudre le problème :)

Source

2017-10-08 04:29:10

Mais la fenêtre ne se redimensionne pas, donc la taille de la police ne devrait pas changer non plus. J'ai essayé avec px et em, ne résout pas le problème.C'est frustrant parce que le redimensionnement ne se produit pas dans les outils de développement, donc je ne peux pas aller à la racine de celui-ci. –

Cela peut être à cause de la résolution du téléphone ou tablette. Il peut être préférable de personnaliser votre page Web pour qu'elle reste la même, peu importe l'appareil.

essayer d'utiliser max-width:Résolution;

Vous devrez appliquer à la classe du corps pour que cela appliquer à tout.

I.E.

`.body {`<br> 
` max-width: 3840px;` /*4K resolution, for 4K displays*/

Cette DEVRAIENT résoudre le problème de texte. Si ce n'est pas le cas, veuillez vous référer au https://www.w3schools.com ou https://developer.mozilla.org/en-US/. il peut être en mesure de vous aider.

Source

2017-10-11 14:37:44 EgMusic

MDN est de loin supérieur à w3schools. – meagar

@meagar J'ai modifié mon post pour inclure ce site – EgMusic

Pour la compatibilité entre mes pages web que je tendance à utiliser les éléments suivants:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Cela semble fonctionner sans style CSS supplémentaire nécessaire pour les plates-formes mobiles. Je ne sais pas si c'est ce que vous voulez.

Source

2017-10-12 16:55:50

Pourquoi le texte de paragraphe est-il réduit dans Chrome for Mobile?

Répondre

Questions connexes