name - ¿Se solucionó el problema del tamaño de fuente en Mobile Safari(iPhone) donde el texto se procesa de forma inconsistente y algunas fuentes son más grandes que otras?

meta viewport maximum scale

Question

Nuestro sitio se presenta con tamaños de fuente inconsistentes en Safari móvil, y hasta donde podemos decir, solo Mobile Safari. Esto nos ha dejado perplejos.

Analizamos el sitio con Firebug, y las áreas incorrectas heredan los estilos correctos, pero las fuentes siguen mostrándose con los tamaños incorrectos.

1) Visite http://www.panabee.com .

2) Llevar a cabo una búsqueda de un nombre de dominio.

Los cuadros en el lado izquierdo muestran los tamaños de letra incorrectos. El tamaño de la fuente debe coincidir con el tamaño de la fuente en el lado derecho (ambos títulos de caja y copia de caja). Por ejemplo, los títulos, "Variaciones" y "Twitter" son mucho más grandes que el título, "finales alternativos".

¿Alguna pista de por qué?

Answer 1

Esto es lo que finalmente funcionó (probado solo en el iPhone 4):

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
td#main_box { -webkit-text-size-adjust:100% }
}

Le otorgamos la respuesta a John, ya que su solución fue la base de esta.

Probablemente no sea la respuesta más elegante, pero funciona.

Answer 2

-webkit-text-size-adjust: none; hará que no pueda acercarse a los dispositivos móviles. Deberías usar 100% cambio.

Answer 3

Mobile Safari (como Chrome para Android, Mobile Firefox e IE Mobile) aumenta el tamaño de fuente de los bloques más anchos (todo el tiempo), de modo que si toca dos veces para acercar ese bloque (que se ajusta al ancho de la pantalla) , el texto será legible Si configura -webkit-text-size-adjust: 100% (o none ), no podrá hacerlo, por lo que cuando un usuario hace doble clic para ampliar los bloques anchos, el texto será ilegiblemente pequeño; los usuarios podrán leerlo si pellizcan, pero luego el texto será más ancho que la pantalla y tendrán que moverse horizontalmente para leer cada línea de texto.

1. Idealmente, solucionaría esto mediante el uso de técnicas de diseño web adaptable para adaptar su diseño a los tamaños de pantalla del móvil (en cuyo caso ya no tendría bloques muy amplios, por lo que los navegadores móviles ya no ajustarían el tamaño de las fuentes).

2. Si eso no es una opción, y está atascado sirviendo un sitio de escritorio a los usuarios móviles, vea si puede ajustar su diseño para que ninguno de sus bloques de texto sea más ancho que el ancho del dispositivo del dispositivo móvil (por ejemplo, 320px para muchos teléfonos retratos) ) (puede usar CSS específico para dispositivos móviles para evitar afectar a los navegadores de escritorio), Mobile Safari no necesitará aumentar el tamaño de las fuentes (y los navegadores que refluyen texto, como el navegador Android y Opera Mobile, tampoco necesitarán cambiar tu diseño).

3. Finalmente, si realmente necesita evitar que Mobile Safari ajuste sus tamaños de fuente, puede configurar -webkit-text-size-adjust: 100% , pero haga esto solo como último recurso, ya que es probable que cause que los usuarios tengan dificultades para leer su texto, ya que será demasiado pequeño o tendrán que desplazarse de un lado a otro después de cada línea que lean. Tenga en cuenta que debe usar 100% no none porque ninguno tiene efectos secundarios desagradables en los navegadores de escritorio . También hay -moz-text-size-adjust equivalentes -moz-text-size-adjust -ms-text-size-adjust y propiedades de -ms-text-size-adjust para Mobile Firefox e IE Mobile.

Editar: por ejemplo, en su caso, la más simple es probablemente la segunda alternativa, por lo que podría intentar agregar el siguiente CSS:

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
table#all_results {
width: auto;
}
td#main_box {
width: 320px;
}
td#side_box {
width: 320px;
}
}

Aunque no es ideal para hardcode 320px como este; podría mejorar al usar una variedad de consultas de medios de CSS, o obtener el ancho del dispositivo desde JavaScript.

Answer 4

-webkit-text-size-adjust:none;

probablemente resolverá tu problema.

target-element { -webkit-text-size-adjust:80% }

seguirá enfocando pero lo mantendrá un 80% más pequeño que los valores predeterminados de los webkits.