css - letra - Tamaño de fuente inconsistente en el teléfono inteligente
tamaño de letra en css (3)
¿Qué hay de establecer una altura de línea?
Tuve el mismo problema a través de diferentes navegadores web donde las fuentes tenían diferentes posiciones. Podría resolver esto estableciendo una height y una line-height .
Estoy ajustando una página web para que se vea bien en los teléfonos inteligentes. He declarado una sección @media en el archivo CSS para poder especificar los tamaños de fuente para esta página. Aquí está la sección de medios:
@media screen and (max-device-width: 640px) {
#TermsOfUse {
padding: 0 2em 0 2em;
margin-left: auto;
margin-right: auto;
color: #777;
font: small sans-serif;
}
#TermsOfUse p {
color: #777;
font-weight: bold;
font: small sans-serif;
padding-top: 1em;
padding-bottom: 1em;
}
#TermsOfUse #trademark_footer p {
font: xx-large sans-serif;
}
}
Sin embargo, los tamaños de fuente se muestran de manera inconsistente. Le he dicho que muestre las fuentes "pequeñas", pero una sección sigue mostrando las fuentes en un tamaño mucho más pequeño (id = "figura_controlador" en la parte inferior). Usar "xx-large" ni siquiera hace que la fuente sea tan grande como la fuente "pequeña" en el resto de la página. Estoy viendo la página en Chrome en Android.
Además, cuando veo esta página en el siguiente simulador, todas las fuentes de toda la página son pequeñas, demasiado pequeñas para leer.
Primero, ¿por qué la fuente en la marca registrada en la parte inferior de la página se muestra mucho más pequeña que las fuentes en el resto de la página (Chrome en Android)?
Segundo, ¿por qué todas las fuentes se muestran tan pequeñas en el simulador de iPhone?
Todo lo que estoy tratando de lograr es mostrar todas las fuentes en un tamaño legible en todos los teléfonos inteligentes.
ACTUALIZAR:
Cuando especifico los tamaños de fuente explícitamente, tengo el mismo problema. Si especifico 13px, por ejemplo, para la fuente principal, tengo que especificar algo alrededor de 30px en la marca para que aparezca en un tamaño similar.
Lo mismo si uso "em" s.
ACTUALIZAR:
Acabo de probarlo en el navegador predeterminado (creo) en mi Samsung Galaxy S2 y eso también muestra la pequeña fuente, tan pequeña que es ilegible. Por cierto, en el navegador Adroid predeterminado, puedo tocar dos veces y se expande a un buen tamaño.
Intenté esto y no pareció hacer una diferencia:
body {
-webkit-text-size-adjust: none;
}
Esta es una posibilidad remota, pero puede ayudarte un poco.
He abierto http://inrix.com/traffic/Privacy con un iPhone4 (iOS 5.0.1) y, de hecho, la fuente es muy pequeña.
Eche un vistazo a las @media s de esta page (También puede ver la plantilla de HTML5 Boilerplate que podría desenterrar algo desde allí con respecto a su problema). No tengo ningún problema con el tamaño de la fuente y he probado el enlace anterior en Chrome (versión 26.0.1410.64 m), iOS 5.0.1 (9A405) y Android 2.3.6 con ambas orientaciones (en los teléfonos). Tal vez podrías desenterrar algo de esos @media s.
No podría estar más de acuerdo con la respuesta de Vector. You should specify sizes when you want consistency , debería evitar los nombres cuando quiera consistencia.
Finalmente aquí hay algunos enlaces para más información:
- Cómo aprendimos a dejar el tamaño de fuente predeterminado solo y abrazar el em .
- Diseño responsivo con CSS3 Media Queries .
Por último, como opción alternativa, puedes descargar e incrustar una font en tu css:
@font-face {
font-family: ''LiberationMonoRegular'';
src: url(''fonts/LiberationMono-Regular-webfont.woff'') format(''woff''),
url(''fonts/LiberationMono-Regular-webfont.ttf'') format(''truetype'');
font-weight: normal;
font-style: normal; }
Luego en tus reinicios solo usa tu fuente:
* { padding: 0; margin: 0; font-family: "LiberationMonoRegular", Verdana, Tahoma; }
¡Espero eso ayude!
He echado un vistazo a la fuente de esa página y no pude ver el
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Cuando miré en mi iPhone, no parecía estar escalando la página en absoluto, lo que sugiere que el dispositivo está interpretando el tamaño de la página y, como tal, ninguna de las consultas de los medios tendrá efecto.
La adición de la metaetiqueta de la ventana gráfica debería activar las consultas de medios y los cambios de fuente que está buscando.