les polices et les icônes Uniapp ne sont pas horizontales

Récemment, lors du développement d'une application Uniapp, j'ai rencontré un problème étrange, c'est-à-dire que les polices et les icônes ne s'affichent pas horizontalement sur certains appareils. Ce problème m'a beaucoup dérangé car il semblait normal sur mon appareil mais il y avait des problèmes sur d'autres appareils. Après plusieurs jours de recherche et de débogage, j'ai enfin trouvé la cause et la solution.

Description du problème

Tout d'abord, examinons les performances de ce problème. Sur mon appareil de développement, comme le montre l'image ci-dessous, les polices et les icônes s'affichent normalement sans aucun problème.

Cependant, lorsque j'ai installé l'application sur d'autres appareils Android, quelque chose s'est mal passé. Comme le montre l'image ci-dessous, vous pouvez voir que ni la police ni l'icône ne sont horizontales. Le bas de la police est incliné vers la gauche et le bas de l'icône est incliné vers la droite.

L'émergence de ce problème a affecté l'esthétique globale de l'application et causera également de gros problèmes pour certaines conceptions d'interface utilisateur qui nécessitent une mise en page fine.

Analyse du problème

Ensuite, analysons la cause de ce problème. Après mon débogage et mes recherches, j'ai découvert que ce problème est principalement dû à la résolution et à la densité de pixels de l'appareil.

Sur mon propre appareil, la résolution est de 1080x1920 et la densité de pixels est de 440 dpi. Sur d'autres appareils de test, la résolution et la densité de pixels varient. Étant donné que les polices et les icônes sont affichées en fonction des pixels, la même taille de police et la même taille d'icône apparaîtront dans différentes tailles sur les appareils avec des résolutions et des densités de pixels différentes. De plus, différents points d’ancrage des polices et des icônes entraîneront également des écarts dans leur alignement inférieur.

Solution

Ensuite, discutons de la façon de résoudre ce problème. Après mes recherches et explorations, j’ai résumé les idées de solutions suivantes.

1. Utiliser des icônes vectorielles

Les icônes vectorielles sont des icônes basées sur des graphiques de description numérique. Elles sont différentes des icônes bitmap et peuvent maintenir la clarté et la cohérence quelle que soit la résolution et la densité de pixels. L'utilisation d'icônes vectorielles évite les problèmes de taille des icônes et d'écart de position causés par différentes résolutions et densités de pixels.

Pour utiliser des icônes vectorielles dans Uniapp, vous devez utiliser une bibliothèque tierce (telle que fontawesome, ionicons, etc. En introduisant le fichier d'icône dans la bibliothèque, l'icône correspondante peut être affichée sur la page en utilisant son correspondant). nom de classe. Pour une utilisation spécifique, veuillez vous référer à la documentation des bibliothèques tierces concernées.

2. Utiliser la mise en page flexible

La mise en page flexible est une nouvelle méthode de mise en page dans CSS3, qui permet aux étiquettes du conteneur d'ajuster de manière flexible la taille, l'espacement et la position, résolvant ainsi les problèmes de composition causés par différentes résolutions et densités de pixels. Uniapp prend également en charge l'utilisation de la mise en page flexible. Vous pouvez définir le mode de mise en page du conteneur parent sur flex, et la taille et la position des étiquettes enfants peuvent être obtenues en définissant leurs propriétés flex.

3. Utilisez des unités de pixels

Dans Uniapp, l'unité par défaut des étiquettes est le rpx (responsive pixel), qui est une unité adaptative en fonction de la densité de pixels de l'appareil, mais dans certains cas, utilisez des unités de pixels (px ) sera plus précis et fiable. Étant donné que l'unité de pixels n'est pas affectée par la densité de pixels de l'appareil, vous pouvez éviter les problèmes de typographie sur les appareils ayant des résolutions et des densités de pixels différentes.

Conclusion

Ce qui précède est mon analyse et ma solution au problème des polices et des icônes inégales dans les applications Uniapp. Après plusieurs jours d'efforts, j'ai finalement trouvé un moyen de résoudre ce problème et je l'ai appliqué avec succès à mon application. Mon application peut désormais afficher une belle typographie sur divers appareils. J'espère que cet article pourra aider d'autres développeurs rencontrant le même problème.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!