Mantieni le dimensioni del carattere HTML quando l'orientamento di iPhone cambia da verticale a orizzontale

Ho un'applicazione web mobile con un elenco non ordinato contenente più elenchi con un collegamento ipertestuale all'interno di ogni li:

... La mia domanda è come posso formattare i collegamenti ipertestuali in modo che NON cambino dimensione quando vengono visualizzati su un iPhone e l'accellerometro passa da verticale -> orizzontale? In questo momento, ho la dimensione del carattere del collegamento ipertestuale specificata su 14px, ma quando si passa al panorama, si espande fino a 20px. Voglio che la dimensione del carattere rimanga invariata. Ecco il codice:

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>

È possibile disabilitare questo comportamento tramite la -webkit-text-size-adjustproprietà CSS:

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

L'uso di questa proprietà è descritto ulteriormente nella Guida al contenuto Web di Safari .

Nota: se si utilizza

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

quindi questo disabiliterà il comportamento dello zoom nei browser predefiniti. Una soluzione migliore è:

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

Ciò corregge il comportamento di iPhone / iPad, senza modificare il comportamento del desktop.

Usando -webkit-text-size-Adjust: none; direttamente su HTML interrompe la possibilità di ingrandire il testo in tutti i browser webkit. Dovresti combinarlo con alcune query multimediali specifiche per iOS. Per esempio:

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

Come accennato in precedenza, regola CSS

 -webkit-text-size-adjust: none

non funziona più con dispositivi moderni.

Fortunatamente, arriva una nuova soluzione per iOS5 e iOS6 (todo: che dire di iOS7?) :

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

Puoi anche aggiungere , user-scalable=0per disattivare lo zoom con pizzico, in modo che il tuo sito Web si comporti come un'app nativa. Se il tuo disegno si interrompe quando l'utente ingrandisce, utilizza invece questo meta tag:

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

Puoi aggiungere una meta nell'intestazione HTML:

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

Puoi anche optare per un ripristino CSS, come normalize.css , che include la stessa regola che crazygringo consiglia:

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

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

Come vedi, include anche una regola specifica del fornitore per IE Phone.

Per informazioni aggiornate sull'implementazione in diversi browser, consultare la pagina di riferimento MDN .

Il codice seguente funziona per me.

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

Prova a svuotare la cache del browser se non funziona.

A partire da marzo 2019 , la regolazione della dimensione del testo ha un ragionevole supporto tra i browser mobili .

body {
  text-size-adjust: none;
}

L'uso del viewportmeta tag non ha alcun effetto sulla regolazione della dimensione del testo e l'impostazione user-scalable: no non funziona nemmeno in IOS Safari .

Nel mio caso questo problema è stato perché ho usato l'attributo CSS width: 100%per il tag HTML input type="text".

Ho modificato il valore widthal 60% e ho aggiunto padding-right:38%.

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