web-dev-qa-db-fra.com

Préservez la taille de la police HTML lorsque l'orientation de l'iPhone change de portrait en paysage

J'ai une application Web mobile avec une liste non ordonnée contenant plusieurs éléments avec un hyperlien à l'intérieur de chaque li:

... Ma question est la suivante: comment puis-je formater les liens hypertexte afin qu'ils ne changent PAS de taille lorsqu'ils sont visualisés sur un iPhone et que l'accéléromètre bascule de portrait -> paysage? À l'heure actuelle, la taille de la police du lien hypertexte est spécifiée à 14 pixels, mais lorsque vous passez en mode paysage, le taux de variation est de 20 pixels. Je veux que la taille de la police reste la même. Voici le code:

ul li a
{
  font-size:14px;
  text-decoration: none;
  color: #cc9999;
}
<ul>
  <li id="home" class="active">
    <a href="home.html">HOME</a>
  </li>
  <li id="home" class="active">
    <a href="test.html">TEST</a>
  </li>
</ul>
iphonehtmlcss
195
DShultz

Vous pouvez désactiver ce comportement via le -webkit-text-size-adjust Propriété CSS:

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

L'utilisation de cette propriété est décrite plus en détail dans le Guide de contenu Web Safari .

404
Matt Stevens

Note: si vous utilisez

html {
    -webkit-text-size-adjust: none;
}

cela désactivera le comportement du zoom dans les navigateurs par défaut. Une meilleure solution est:

html {
    -webkit-text-size-adjust: 100%;
}

Cela corrige le comportement de l'iPhone/iPad sans changer le comportement du bureau.

101
crazygringo

Utilisation de -webkit-text-size-adjust: none; directement sur HTML annule la possibilité de zoomer du texte dans tous les navigateurs Webkit. Vous devez combiner cela avec certaines requêtes multimédia spécifiques à iOS. Par exemple:

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
     html {
        -webkit-text-size-adjust: none;
     }
}
25
snobojohan

Comme il a été mentionné précédemment, la règle CSS

 -webkit-text-size-adjust: none

ne fonctionne plus dans les appareils modernes.

Heureusement, une nouvelle solution vient pour iOS5 et iOS6 (à faire: qu'en est-il de iOS7?):

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

Vous pouvez également ajouter , user-scalable=0 pour désactiver le zoom par pincement afin que votre site Web se comporte comme une application native. Si votre conception freine lorsque l'utilisateur effectue un zoom, utilisez plutôt cette balise META:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
12
Dan

Vous pouvez ajouter une méta dans l'en-tête HTML:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

10
Guillaume

Vous pouvez également opter pour une réinitialisation CSS, telle que normalize.css , qui inclut la même règle que celle recommandée par crazygringo:

/**
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

Comme vous le voyez, il inclut également une règle spécifique au fournisseur pour le IE Phone.

Pour obtenir des informations actuelles sur l’implémentation dans différents navigateurs, reportez-vous à page de référence MDN .

8
Manu

Le code ci-dessous fonctionne pour moi.

html{-webkit-text-size-adjust: 100%;}

Essayez de vider le cache de votre navigateur s'il ne fonctionne pas.

2
Aman

Dans mon cas, ce problème est dû au fait que j'ai utilisé l'attribut CSS width: 100% pour la balise HTML input type="text".

J'ai changé la valeur de width à 60% et ajouter padding-right:38%.

input {
    padding-right: 38%;
    width: 60%;
}
0
Belyash

À compter de mars 2019, text-size-adjust a n support raisonnable parmi les navigateurs mobiles .

body {
  text-size-adjust: none;
}

L'utilisation de la balise méta viewport n'a aucun effet sur l'ajustement de la taille du texte et la définition de user-scalable: none fonctionne même pas dans IOS Safari .

0
Radek Matěj