Chrome en Android cambia el tamaño de la fuente

84

Aparentemente, una vez que el párrafo del texto alcanza cierta longitud, Google Chrome en Android decide cambiar el tamaño del texto y hacerlo más grande (provocando todo tipo de diversión). Ahora tengo un sitio web donde aproximadamente la mitad de las p-etiquetas siguen el tamaño que establecí y la otra mitad cambia a su gusto, aparentemente dependiendo de la longitud del párrafo.

¿Cómo diablos soluciono esto?

— Sprax
fuente

1

¿Tienes un ejemplo? Además, ¿qué versión de Android y Chrome?

— Junuxx

93

Agregue max-height: 999999px;al elemento en el que desea evitar el aumento de fuente, o su elemento principal.

— moeffju
fuente

13

Android Chrome solo aplica el aumento de fuente a los elementos con altura dinámica. Tan pronto como especifique una altura o una altura máxima, no se aplica el aumento de fuente. Establecer la altura máxima en un número grande es simple y no debería tener efectos secundarios.

— moeffju

1

Solo una advertencia para esto. Esto resolvió el problema que tenía con las fuentes de Chrome en Android que no funcionaban bien. Sin embargo , rompió la vista del ipad del sitio en versiones específicas de ios.

— James McDonnell

Además, causó algunos problemas en el ipad para las transiciones css3.

— James McDonnell

4

El uso de esto rompe significativamente el diseño de muchos elementos en Safari (5.1.7), incluso si no está utilizando la altura máxima o las alturas definidas para empezar. Algunos sitios quedaron completamente inutilizables, todos los divelementos estructurales se colapsaron torpemente en la parte superior de la página. ¡No "cubra" su sitio con una definición de altura máxima! Úselo solo donde sea necesario y pruébelo a fondo.

— Radley Sustaire

2

Cachorro ... Justo cuando pensé que lo había visto todo ... Otro error loco con otra solución loca. FWIW No veo ningún problema en Safari y, min-height: 1pxdesafortunadamente, no tuvo ningún efecto. max-height: 999999pxaunque hace el truco. Mi caso fue una transición de contenido muy larga durante la entrada / salida de la ruta. El aumento de fuente ocurrió durante o justo después de la transición, no estoy seguro de cuál, pero causó un cambio muy notable.

— Chase

60

Incluya la siguiente <meta>etiqueta en el documento <head>:

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

Esto establecerá correctamente el marco de la vista y, por lo tanto, eliminará la necesidad de "FontBoosting".

— Joe DeRose
fuente

6

Esta es definitivamente la solución preferida. Si te importa cómo se ven las cosas en dispositivos móviles, ¡hazte cargo de tu ventana gráfica!

— Paul Irish

17

Sin embargo, esto no deshabilita el refuerzo de fuentes.

— Ed Hinchliffe

1

Ciertamente corrige el escalado no deseado y lo usaré en el futuro.

— Dizzley

5

Como nota, tengo <meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">y sigo obteniendo una escala terrible de Chromes

— Sam

Eso es mejor porque la fuente es legible. Mantiene la proporción mientras aumenta el tamaño para mejorar la legibilidad. Perfecto para mi.

— Jennifer Michelle

23

Ahora hay una propiedad CSS que puede configurar para controlar esto:

-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;

Ver https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

— Gareth
fuente

ajuste de tamaño de texto: ninguno funcionó para mí en el último Chrome de Android.

— Stepan Yakovenko

Esta es la solución preferida si está utilizando un gas implementado como aplicación web.

— jpp

Esto no funciona para mí, pero la altura máxima sí.

— Radenko Zec

15

Pon esto en tu reinicio. html * {max-height:1000000px;}

— Ed Hinchliffe
fuente

estaba causando problemas conmigo por el pie de página pegajoso, tuve que hacer html body * en su lugar

— Sabrina Leggett

Esto es un poco demasiado agresivo, a menos que realmente esté experimentando un problema en muchos elementos impredecibles. De lo contrario, sería mejor apuntar solo a los elementos del problema.

— Chase

1

@Chase: en mi caso, eran elementos impredecibles (dinámicos), por lo que tuvimos que usar un *enfoque. Dicho esto, diría que esta es una de esas cosas oscuras de las que probablemente te olvidarías y que pueden causar problemas en el futuro, por lo que para la mantenibilidad probablemente lo habría dejado *incluso si en ese momento era solo uno / a. pocos elementos.

— Ed Hinchliffe

Inmediatamente después de encontrar este hilo y comentar, comencé a ver problemas adicionales que sospechaba que estaban relacionados con el aumento de fuentes. Entonces, efectivamente (al menos por ahora) hay un * max-height...en mi código LOL

— Chase

6

Después de algunas pruebas, esta regla me ayudó. Debe agregarse al elemento que contiene el texto mejorado o al elemento principal, según la estructura div / table.

element or parent element { 
    /* prevent font boosting on mobile devices */
    width: 100%;
    height: auto;
    min-height: 1px;
    max-height: 999999px;
}

Quizás los valores de ancho y alto deben corregirse según sus necesidades.

— metamagikum
fuente

2

Encontré una solución para mis páginas: ¡dale al elemento principal un ancho y un alto! La fuente no saldrá de esos bordes, por lo que seguirá siendo pequeña (más).

— Randy Vroegop
fuente

1

Esto se denomina "refuerzo de fuentes" y se describe con cierto detalle en este error de WebKit . Actualmente no hay forma de desactivarlo.

— Boris Smus
fuente

Parece que de hecho aumenta la fuente, pero se puede evitar configurando max-height: 999999pxcomo se describe en @moeffju.

— Chase