Por qué los tamaños de fuente (y otros elementos) aparecen tan pequeños en dispositivos móviles

Question

Estoy intentando crear una hoja de estilos especial para dispositivos móviles (por ejemplo, iphone).

que tengo en la hoja de estilo principal de una regla como ésta:

body 
{ 
    font-family: arial,georgia,"times new roman",times,serif; 
    font-size: 12px; 
    line-height: 18px; 
} 

y para una determinada cabecera: (todos mis tamaños fuentes están en ellos, excepto para el cuerpo que define todos)

#header #PageTitle h1{ 
    font-size: 4.5em; 
} 

Cuando veo el gran encabezado en mi iphone parece silencioso, ¿qué debo hacer para verlo en un tamaño más grande? ¿Cómo puedo aplicar a todos los elementos una regla para "solo ser el doble de grande" (traté de cambiar el tamaño del tamaño de letra del cuerpo pero eso no funcionó).

¿Qué estoy haciendo mal y cómo debería hacerse correctamente?

Answer 1

-webkit-text-size-adjust: none | auto | <percentage>;

Así, el doble de grande sería: -webkit-text-size-adjust: 200%;

Answer 2

Establecería el body ajustado en y luego los encabezados, etc., configurados en consecuencia.

Answer 3

me encontré con este pedazo de código que desactiva el escalado en el iPhone:

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

No estoy seguro de si este es el solución exacta (y todo parecía demasiado grande) - pero esto está a mitad de camino ...