web-dev-qa-db-fra.com

Obtenir la bonne taille de police sur chaque appareil mobile

Dans mon application mobile, j'utilise des types de polices de grande taille, par exemple:

<b style="font-size:100px; font-family:Segoe UI">text</b>

Lorsque je le teste sur mon téléphone, il a fière allure, mais sur un téléphone plus petit, il a toujours la même taille et est trop gros.

Quels paramètres css dois-je utiliser pour obtenir la même taille sur tous les téléphones?

cssfont-size
11
brent

Vous devriez utiliser des requêtes multimédia pour différentes largeurs de périphériques. 

@media only screen and (max-width: 768px) {
  b {
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  b {
    font-size: 10px;
  }
}

Etc...

9
drip

Les requêtes de médias ne fonctionneront pas. Oui, vous pouvez avoir une taille de police variable en fonction de la taille de l'écran (taille du pixel et non de la taille physique. Par conséquent, la taille ne sera pas la même sur deux appareils dotés d'écrans de la même taille physique mais ayant une densité de pixels différente). Votre objectif est que le texte ait la même taille physique sur tous les périphériques ayant la même taille d'écran, quelle que soit la densité de pixels.

De nos jours, les téléphones mobiles s’adaptent aux résolutions Ultra HD sur des écrans de la taille d’un Palm, alors que les téléphones plus anciens présentaient une densité de pixels bien inférieure.

Il n'y avait pas de solution à ce problème jusqu'à récemment. Récemment, CSS3 a ajouté la prise en charge de ce qu’ils appellent «Viewport Sized Typography». Il vous permet de définir la taille des objets par rapport à la taille de l'écran physique. C'est expliqué ici . 

17
Caner

Avoir du texte avec des tailles identiques ou similaires est souhaitable sur tous les appareils et vous ne l'obtenez pas par défaut. Ce n’est pas parce que les périphériques plus petits ont des pixels physiques plus petits ou plus petits, mais bien à cause de la mise à l’échelle qui se produit sur ces périphériques afin de ne pas endommager les pages principalement conçues pour des écrans de bureau plus grands. 

Par exemple, l'iPhone 5 comporte 1136 x 640 pixels physiques, mais la barre d'outils des outils de développement de Chrome permet de constater que certains éléments semblent beaucoup plus volumineux que cela (par exemple, 1300x900). Cela est dû à la réduction du zoom arrière que les navigateurs appliquent par défaut. Dans ce cas, la taille des pixels CSS deviendrait beaucoup plus petite que la taille réelle des pixels. Imaginez voir une page de la taille d'un bureau dans un téléphone intelligent, mais beaucoup plus petite. 

Si vous ne voulez pas que cela se produise, vous devez dire explicitement au navigateur de ne pas gâcher la mise à l'échelle (dans l'en-tête de votre page): 

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

Si le texte est identique sur tous les appareils, il se peut que vous ayez quelque chose comme ça et que vous deviez simplement le supprimer pour le voir plus petit sur les smartphones. 

13
mehmet

Utilisez les requêtes @media et définissez différentes polices pour différentes résolutions

Exemple

@media all and (max-width: 1200px) and (min-width: 800px) {
                    /* Change Resolutions Here */
  b {
    font-size: 12px;
  }
}

Bonne lecture sur les requêtes de médias

1
Mr. Alien

Vous pouvez également consulter https://github.com/modularscale/modularscale-sass

Il peut vite devenir très compliqué de définir de nombreux points d'arrêt pour chaque appareil mobile et j'ai obtenu de très bons résultats avec l'échelle modulaire.

En outre, la définition des tailles de police dans les EM ou les REM est la voie à suivre si vous souhaitez être totalement accessible/flexible.

0
Capsule