Utilisez-vous text-size-adjust dans vos styles globaux ?-tutoriel CSS-php.cn

Utilisez-vous text-size-adjust dans vos styles globaux ?

王林

Libérer： 2024-09-11 06:38:02

original

1288 Les gens l'ont consulté

Récemment, je suis tombé sur un problème CSS énigmatique qui ne se manifestait que sur les vrais appareils mobiles, en particulier iOS Safari. Certaines polices semblaient disproportionnées, perturbant l’intégrité de la mise en page. Essayer de résoudre ce problème en appliquant différentes tailles de police dans les outils de développement, et même en utilisant !important n'a eu aucun effet. Vous pouvez voir ci-dessous l'affichage de l'écran souhaité et l'écran que j'ai fini par voir.

Do you use text-size-adjust in your global styles?

Comprendre ce qui se passe

En enquêtant, j'ai découvert que parfois les navigateurs mobiles ajustent dynamiquement la taille des polices pour améliorer la lisibilité pour les utilisateurs. Le comportement de rendu des navigateurs mobiles diffère de celui des navigateurs de bureau. Contrairement aux navigateurs de bureau, qui affichent généralement les pages dans la largeur de l'écran de l'appareil, les navigateurs mobiles utilisent souvent une fenêtre d'affichage plus large, généralement définie sur 980 px par défaut, pour s'adapter aux sites Web qui ne sont pas optimisés pour les écrans plus petits. Cela conduira inévitablement à un défilement horizontal. Pour contrecarrer cela, la règle ci-dessous est couramment utilisée en HTML pour garantir que la fenêtre d'affichage s'adapte avec précision à la taille de l'appareil.

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

Copier après la connexion

Cependant, lors de la réduction pour s'adapter à un écran mobile, certains navigateurs peuvent rendre le texte trop petit, ce qui incite à l'application d'un algorithme d'inflation de texte pour l'agrandir pour une meilleure lisibilité. Cet algorithme conduit parfois à un agrandissement inattendu de la police, particulièrement visible lorsqu'un élément s'étendant sur toute la largeur de l'écran subit une augmentation de la taille du texte sans altérer la mise en page. Pour résoudre ce problème et maintenir un dimensionnement de texte cohérent sur tous les appareils, nous pouvons utiliser la propriété CSS text-size-adjust.

L'ajustement de la taille du texte permet aux auteurs Web de désactiver ou d'ajuster ce comportement d'inflation automatique du texte, particulièrement crucial pour les sites Web conçus pour les petits écrans (ce que sont, je crois, la majorité des nouveaux sites Web). Cette propriété contrôle l'algorithme d'inflation du texte utilisé sur certains smartphones et tablettes. Les autres navigateurs l'ignoreront. L'ajustement de la taille par défaut affecte le texte et les contrôles de formulaire, que ces contrôles de formulaire contiennent du texte (par exemple, entrées de texte, sélections) ou non (par exemple, boutons radio, cases à cocher).

Il a 3 valeurs possibles :

auto : cette valeur indique aux moteurs de rendu d'utiliser l'ajustement de la taille par défaut lors du rendu du texte sur de petits appareils.
none : Il est demandé aux moteurs de rendu de n'effectuer aucun ajustement de la taille du texte affiché sur les petits appareils.
pourcentage[0,∞] : les moteurs de rendu ne doivent pas effectuer d'ajustement de la taille, mais à la place, la valeur calculée de la taille de la police doit être multipliée par ce pourcentage. Utiliser 100 % équivaut à n’en utiliser aucun.

Mon approche pour résoudre ce problème

J'ai résolu le problème d'inflation du texte en ajoutant cette propriété au corps dans le cadre de nos styles CSS globaux (peut également être ajoutée au HTML). Je recommande d'ajouter cette règle à votre fichier CSS global/reset/normalize :

body {
    // prevent font-size inflation on small devices
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

Copier après la connexion

Pour iOS Safari uniquement, -webkit-text-size-adjust fonctionne mais j'ai inclus d'autres fournisseurs et une propriété non-fournisseur pour ajouter la prise en charge d'autres navigateurs. Il est très important d'ajouter la propriété non-fournisseur au début. S'il est ajouté à la fin, dans Safari iOS, il remplacera celui de -webkit et comme il n'est pas pris en charge, il ne sera pas appliqué, donc les choses fonctionneront par défaut.

Quelques autres considérations à garder à l’esprit :

Nature expérimentale : il est crucial de faire preuve de prudence lors de l'implémentation de la propriété text-size-adjust dans des environnements de production, car elle reste une fonctionnalité expérimentale. La prise en charge et la mise en œuvre du navigateur peuvent subir des modifications au fil du temps.
Définition de « petit appareil » : Il existe encore une ambiguïté autour de la définition de ce qui constitue un « petit appareil ».
Certaines personnes se plaignaient du fait que l'utilisation d'aucun empêcherait de zoomer sur les mobiles, mais ce n'était pas le cas lorsque j'ai testé, aucun et 100 % fonctionnaient de la même manière selon l'explication de mdn.