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

Question

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

<ul>
    <li id="home" class="active">
        <a href="home.html">HOME</a></div>
    </li>
    <li id="home" class="active">
        <a href="test.html">TEST</a></div>
    </li>
</ul>

...Ma question est comment puis-je formater les liens hypertexte de sorte qu'ils NE changent PAS de taille vu sur un iPhone, et le accellerometer passe du mode portrait -> paysage? Maintenant, j'ai le lien hypertexte taille de la police spec ed à 14px, mais lors d'un changement de paysage, il souffle le chemin jusqu'à comme 20px. Je veux une taille de police de rester le même. Voici le sélecteur:

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

Answer 1

Vous pouvez désactiver ce comportement via la propriété -webkit-text-size-adjust 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 .

Answer 2

Note: si vous utilisez

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

cela désactive 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 modifier le comportement du bureau.

Answer 3

Utiliser -webkit-text-size-adjust: none; directement sur html rompt la possibilité de zoomer du texte dans tous les navigateurs webkit. Vous devriez combiner ceci avec certaines requêtes de mé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;
     }
}
 

Answer 4

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

fonctionne n’est plus dans les appareils modernes.

Heureusement, une nouvelle solution vient pour iOS5 et iOS6 (todo : qu’en est-il iOS7 ?):

Vous pouvez également ajouter des `` pour désactiver la fonction pinch zoom, si votre site se comporterait comme une application native. Si votre conception de freins quand l’utilisateur zoome, utilisez plutôt la balise meta suivante :

Answer 5

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