Schriftgröße Problem mit iPhone

Question

Ich arbeite derzeit an einer mobilen Version einer Website, alles ist toll, funktioniert gut auf einem iPhone, Blackberry und Android.

Ich habe ein kleines Problem, keine große Sache, aber immer noch ein bisschen nervig. Ich habe:

<h1> Tags auf 18px und fett
<h2> Tags auf 12px und fett
<p> Tags auf 12px und normalen

Jetzt ist alles sieht gut aus auf dem iPhone, wenn im Hochformat betrachten, aber wenn die Vorrichtung Landschaft gedreht wird die <h1> Titel gehen kleiner (schwer zu sagen, aber möglicherweise kleiner als die <h2> Tags ?!

Hier ist meine CSS:

h1 { 
color:#FFFFFF; 
font-size:18px; 
line-height:22px; 
font-weight:bold; 
margin-top:0px; 
} 

h2 { 
font-size:12px; 
color:#333333; 
font-weight:bold; 
margin-bottom:-5px; 
} 

p { 
color:#333333; 
font-size:12px; 
line-height:18px; 
font-weight:normal; 
} 

Answer 1

Ich glaube, Sie sind für diese in Ihrem CSS suchen:

html { 
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */ 
} 

Answer 2

Wie in Neurofluxation Antwort angegeben Sie die CSS-Regel -webkit-text-size-adjust verwenden können, aber Vorsicht, dass diese Benutzer verhindern kann, Einstellen die Schriftgröße auf dem Desktop-Webkit (siehe auch this article für weitere Details).

In Anbetracht dessen ist es wahrscheinlich wert, über CSS3 Medienabfragen (oder User-Agent) zu überprüfen, um sicher zu sein.

ZB

@media only screen and (max-device-width: 480px) { 
    html { 
     -webkit-text-size-adjust: none; 
    } 
} 

Answer 3

Eine bessere Lösung kann unter Verwendung von 100% anstelle von keinem sein, wie user612626 in einem älteren Thread angegeben: Font size rendering inconsistencies on an iPhone

body { 
    -webkit-text-size-adjust: 100%; 
} 

diese Weise Desktop Webkit-Browser anpassen Größe und Zoom proportional auch. Ich denke, das ist ein besserer Ansatz als die Filterung nach Bildschirmgröße.

Ich hoffe, es hilft.