teclado - fuentes de letras iphone

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

Question

Tengo una aplicación web móvil con una lista desordenada que contiene múltiples 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 cuando cambio a paisaje, sopla hasta 20px. Quiero que el tamaño de letra 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>

Answer 1

Como se mencionó anteriormente, 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=0 para desactivar el zoom pellizco, por lo que su sitio web se comportará como una aplicación nativa. Si su diseño se frena cuando el usuario amplía, use esta metaetiqueta en su lugar:

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

Answer 2

El siguiente código funciona para mí.

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

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

Answer 3

En mi caso, este problema ha sido porque utilicé el width: 100% atributo CSS width: 100% para la input type="text" etiqueta HTML input type="text" .

Cambié el valor del width al 60% y agregué el padding-right:38% .

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

Answer 4

Nota: si usa

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.

Answer 5

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

Answer 6

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

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

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

Answer 7

También puede optar por usar un restablecimiento de 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 de IE.

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

Answer 8

Usar -webkit-text-size-adjust: none; directamente en html rompe la capacidad de acercar 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;
     }
}