Preserve el tamaño de fuente HTML cuando la orientación del iPhone cambie de vertical a horizontal

Tengo una aplicación web móvil con una lista desordenada que contiene varios elementos de lista con un hipervínculo dentro de cada li:

... Mi pregunta es cómo puedo formatear los hipervínculos para que NO cambien de tamaño cuando se ven en un iPhone, y el acelerómetro cambia de vertical -> horizontal. En este momento, tengo el tamaño de fuente del hipervínculo especificado a 14px, pero al cambiar a horizontal, aumenta a 20px. Quiero que el tamaño de fuente permanezca igual. Aquí está el código:

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>

Puede deshabilitar este comportamiento a través de la -webkit-text-size-adjustpropiedad CSS:

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

El uso de esta propiedad se describe más detalladamente en la Guía de contenido web de Safari .

Nota: si usas

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

entonces esto deshabilitará el comportamiento del zoom en los navegadores predeterminados. Una mejor solución es:

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

Esto corrige el comportamiento del iPhone / iPad, sin cambiar el comportamiento del escritorio.

Usando -webkit-text-size-ajustar: ninguno; directamente en html rompe la capacidad de hacer zoom de texto en todos los navegadores webkit. Debe combinar esto con algunas consultas de medios específicas para iOS. Por ejemplo:

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

Como se mencionó antes, la regla CSS

 -webkit-text-size-adjust: none

ya no funciona en dispositivos modernos.

Afortunadamente, viene una nueva solución para iOS5 e iOS6 (todo: ¿qué pasa con iOS7?) :

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

También puede agregar , user-scalable=0para desactivar el zoom de pellizco, para que su sitio web se comporte como una aplicación nativa. Si su diseño se frena cuando el usuario hace zoom, use esta metaetiqueta en su lugar:

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

Puede agregar un meta en el encabezado HTML:

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

También puede optar por usar un restablecimiento CSS, como normalize.css , que incluye la misma regla que recomienda 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%;
}

Como puede ver, también incluye una regla específica del proveedor para el teléfono IE.

Para obtener información actual sobre la implementación en diferentes navegadores, consulte la página de referencia de MDN .

El siguiente código funciona para mí.

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

Intente borrar el caché de su navegador si no funciona.

A partir de marzo de 2019 , el ajuste del tamaño del texto tiene un soporte razonable entre los navegadores móviles .

body {
  text-size-adjust: none;
}

El uso de viewportmetaetiquetas no tiene ningún efecto en el ajuste del tamaño del texto y la configuración user-scalable: no ni siquiera funciona en IOS Safari .

En mi caso, este problema se debe a que utilicé el atributo CSS width: 100%para la etiqueta HTML input type="text".

Cambié el valor de widthal 60% y agregué padding-right:38%.

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