Chrome en Android cambia el tamaño de la fuente

Question 1

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?

Question 2

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

Question 3

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".

Question 4

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

Question 5

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

Question 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.

Question 7

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).

Question 8

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

Answer 1

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?

android html css google-chrome font-size Sprax
fuente

1

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

Junuxx

Answer 2

1

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

Junuxx

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

James McDonnell

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

17

Sin embargo, esto no deshabilita el refuerzo de fuentes.

Ed Hinchliffe

Answer 12

1

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

Dizzley

Answer 13

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

Answer 14

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

Answer 15

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

Answer 16

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

Stepan Yakovenko

Answer 17

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

jpp

Answer 18

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

Radenko Zec

Answer 19

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

Answer 20

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

Sabrina Leggett

Answer 21

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

Answer 22

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

Answer 23

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

Answer 24

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.

Answer 25

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).

Answer 26

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

Answer 27

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

Chase

Chrome en Android cambia el tamaño de la fuente

Respuestas: