Préserver la taille de la police HTML lorsque l'orientation de l'iPhone passe de portrait en paysage

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

... Ma question est de savoir comment formater les hyperliens pour qu'ils ne changent PAS de taille lorsqu'ils sont affichés sur un iPhone, et que l'accéléromètre passe de portrait -> paysage? À l'heure actuelle, la taille de la police du lien hypertexte est spécifiée à 14 pixels, mais lorsque je passe en mode paysage, elle monte jusqu'à 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>

Vous pouvez désactiver ce comportement via la -webkit-text-size-adjustproprié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 du contenu Web Safari .

Remarque: si vous utilisez

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

alors 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.

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

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

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 (todo: qu'en est-il d'iOS7?) :

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

Vous pouvez également ajouter , user-scalable=0pour 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">

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;" />

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

/**
 * 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 comprend également une règle spécifique au fournisseur pour le téléphone IE.

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

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.

Depuis mars 2019, l' ajustement de la taille du texte bénéficie d' un support raisonnable parmi les navigateurs mobiles .

body {
  text-size-adjust: none;
}

L'utilisation de la viewportbalise META n'a aucun effet sur le réglage de la taille du texte et le paramètre user-scalable: no ne fonctionne même pas dans IOS Safari .

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

J'ai changé la valeur de width60% et j'ajoute padding-right:38%.

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