Comment empêcher les modifications de la taille de la police des liens hypertextes de l'iPhone en fonction de l'orientation ?

Comment conserver la taille de la police des liens hypertextes lors des changements d'orientation de l'iPhone

Lors du développement d'applications Web mobiles, il est important de maintenir une expérience utilisateur cohérente sur différentes orientations d'appareils crucial. Cela inclut la préservation du style des éléments de texte, tels que la taille de la police.

Un problème survient lors du rendu des hyperliens sur l'iPhone. Par défaut, lors du passage du mode portrait au mode paysage, la taille de la police des hyperliens augmente considérablement. Cela peut perturber l'esthétique visuelle et la lisibilité.

Solution : désactivez la mise à l'échelle de la taille du texte avec -webkit-text-size-adjust

Pour résoudre ce problème, vous pouvez utiliser la propriété CSS -webkit-text-size-adjust. Cette propriété vous permet de désactiver la mise à l'échelle de la taille de la police lors des changements d'orientation tout en permettant aux utilisateurs de zoomer ou dézoomer.

Voici comment implémenter cette solution :

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

En définissant le -webkit- text-size-adjust à 100 %, vous neutralisez efficacement le comportement par défaut de l'appareil consistant à agrandir le texte en mode paysage. Par conséquent, les hyperliens conserveront leur taille de police quelle que soit l'orientation de l'appareil.

Exemple :

Dans votre exemple fourni :

ul li a {
    font-size:14px;
    text-decoration: none;
    color: #cc9999;
}

L'ajout de la propriété -webkit-text-size-adjust à l'élément HTML garantira que les hyperliens conservent leur taille de police de 14 px en mode portrait et paysage. orientations.

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!