Perché le dimensioni dei caratteri (e altri elementi) appaiono così piccoli sui dispositivi mobili

Question

Sto provando a creare un foglio di stile speciale per i dispositivi mobili (ad esempio, iphone).

ho nel foglio di stile principale una regola come questa:

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

e per un certo intestazione: (tutti i miei dimensioni font sono in em fatta eccezione per il corpo che definisce tutti)

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

Quando vedo la testata grande sul mio iphone sembra piccola, cosa devo fare per vederla in una dimensione più grande? Come posso applicare a tutti gli elementi una regola per "essere solo due volte più grande" (ho provato a ridimensionare la dimensione del font del corpo ma non ha funzionato).

Cosa sto facendo male e come dovrebbe essere fatto correttamente?

Answer 1

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

Così, due volte più grande sarebbe: -webkit-text-size-adjust: 200%;

Answer 2

Imposterei body impostato su 1em e quindi le intestazioni, ecc., Impostate di conseguenza.

Answer 3

ho trovato questo pezzo di codice che disabilita il ridimensionamento in iPhone:

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

Non sono sicuro se questo è il soluzione esatta (e ha fatto sembrare tutto troppo grande) - ma questo è a metà strada ...