Zachowaj rozmiar czcionki HTML, gdy orientacja iPhone'a zmieni się z pionowej na poziomą

Mam mobilną aplikację internetową z nieuporządkowaną listą zawierającą wiele listitemów z hiperłączem wewnątrz każdego li:

... Moje pytanie brzmi: jak sformatować hiperłącza, aby NIE zmieniały rozmiaru podczas oglądania na iPhonie, a akcelerometr przełączał się z pionowego -> poziomego? W tej chwili mam rozmiar czcionki hiperłącza określony na 14px, ale po przejściu do poziomej zmienia się na około 20px. Chcę, aby rozmiar czcionki pozostał taki sam. Oto kod:

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>

Możesz wyłączyć to zachowanie za pomocą -webkit-text-size-adjustwłaściwości CSS:

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

Korzystanie z tej właściwości opisano szczegółowo w przewodniku Safari Web Content Guide .

Uwaga: jeśli używasz

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

spowoduje to wyłączenie funkcji powiększania w domyślnych przeglądarkach. Lepszym rozwiązaniem jest:

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

To koryguje zachowanie iPhone'a / iPada bez zmiany zachowania pulpitu.

Użycie -webkit-text-size-adjust: brak; bezpośrednio na html przerywa możliwość powiększania tekstu we wszystkich przeglądarkach webkit. Powinieneś połączyć to z niektórymi zapytaniami o media specyficznymi dla iOS. Na przykład:

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

Jak wspomniano wcześniej, reguła CSS

 -webkit-text-size-adjust: none

nie działa już w nowoczesnych urządzeniach.

Na szczęście pojawiło się nowe rozwiązanie dla iOS5 i iOS6 (todo: co z iOS7?) :

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

Możesz także dodać, , user-scalable=0aby wyłączyć powiększanie szczypcami, aby Twoja witryna zachowywała się jak natywna aplikacja. Jeśli Twój projekt zawiesza się podczas powiększania przez użytkownika, użyj tego metatagu:

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

Możesz dodać meta w nagłówku HTML:

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

Możesz także wybrać reset CSS, taki jak normalize.css , który zawiera tę samą regułę, którą zaleca 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%;
}

Jak widać, zawiera także regułę specyficzną dla dostawcy dla telefonu IE.

Aktualne informacje o implementacji w różnych przeglądarkach znajdują się na stronie referencyjnej MDN .

Poniższy kod działa dla mnie.

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

Spróbuj wyczyścić pamięć podręczną przeglądarki, jeśli nie działa.

Od marca 2019 r. Dostosowanie rozmiaru tekstu ma uzasadnione wsparcie wśród przeglądarek mobilnych .

body {
  text-size-adjust: none;
}

Użycie viewportmetatagu nie ma wpływu na dopasowanie rozmiaru tekstu, a ustawienie user-scalable: no nawet nie działa w IOS Safari .

W moim przypadku problem polegał na tym, że użyłem atrybutu CSS width: 100%dla tagu HTML input type="text".

Zmieniłem wartość widthna 60% i dodałem padding-right:38%.

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