Behalten Sie die HTML-Schriftgröße bei, wenn die iPhone-Ausrichtung von Hoch- auf Querformat wechselt
Lesezeit: 3 Minuten
DShultz
Ich habe eine mobile Webanwendung mit einer ungeordneten Liste, die mehrere Elemente mit jeweils einem Hyperlink enthält li:
Meine Frage ist: Wie kann ich die Hyperlinks so formatieren, dass sie die Größe NICHT ändern, wenn sie auf einem iPhone angezeigt werden, und der Beschleunigungsmesser von Hoch- auf Querformat umschaltet?
Im Hochformat habe ich die Hyperlink-Schriftgröße auf eingestellt 14pxaber wenn ich das Gerät auf Querformat schalte, bläst es weit nach oben 20px.
Ich möchte, dass die Schriftgröße gleich bleibt.
Hier ist der Beispielcode:
ul li a {
font-size:14px;
text-decoration: none;
color: #cc9999;
}
Wie snobojohan feststellt, können Sie dies in eine landschaftsspezifische Medienabfrage einpacken, um die Möglichkeit zu erhalten, die Schriftgröße in Desktop-Browsern zu erhöhen. Dies ist auf iOS-Zielseiten nicht erforderlich, auf denen Pinch-Zoom trotzdem funktioniert.
– Matt Stevens
18. Februar 2011 um 22:04 Uhr
Diese Funktion scheint in iOS6 nicht zu funktionieren. Sie können auch versuchen, es zu verwenden <meta content="viewport" Meta-Tag (siehe unten)
Vielen Dank dafür … Ich habe versucht herauszufinden, was mit der Schriftgrößenanpassung im Querformat los war xD
– Jeff Rasierer
21. Januar 2014 um 21:36 Uhr
@bfred.it +1, ich denke, es würde sich lohnen, diese Antwort mit dieser Änderung zu bearbeiten.
– Min
26. März 2014 um 7:22 Uhr
Hinweis: Wenn Sie verwenden
html {
-webkit-text-size-adjust: none;
}
dann wird das Zoomverhalten in Standardbrowsern deaktiviert. Eine bessere Lösung ist:
html {
-webkit-text-size-adjust: 100%;
}
Dadurch wird das iPhone/iPad-Verhalten korrigiert, ohne das Desktop-Verhalten zu ändern.
snobojohan
Verwendung von -webkit-text-size-adjust: keine; direkt auf html unterbricht die Möglichkeit, Text in allen Webkit-Browsern zu zoomen. Sie sollten dies mit einigen für iOS spezifischen Medienabfragen kombinieren. Zum Beispiel:
@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
html {
-webkit-text-size-adjust: none;
}
}
Lustigerweise habe ich es nur zum Laufen gebracht, indem ich die Eigenschaft -webkit in die Medienabfrage eingefügt habe. Danke!
– zuallauz
30. November 2011 um 3:18 Uhr
Dan
Wie bereits erwähnt, CSS-Regel
-webkit-text-size-adjust: none
funktioniert in modernen Geräten nicht mehr.
Glücklicherweise kommt eine neue Lösung für iOS5 und iOS6 (todo: was ist mit iOS7?):
Sie können auch hinzufügen , user-scalable=0 um das Pinch-Zoomen zu deaktivieren, damit sich Ihre Website wie eine native App verhält. Wenn Ihr Design beim Zoomen des Benutzers bremst, verwenden Sie stattdessen dieses Meta-Tag:
Sie können sich auch für die Verwendung eines CSS-Resets entscheiden, z normalisieren.cssdie dieselbe Regel enthält, die crazygringo empfiehlt:
/**
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
Wie Sie sehen, enthält es auch eine herstellerspezifische Regel für das IE Phone.
Aktuelle Informationen zur Implementierung in verschiedenen Browsern finden Sie unter die MDN-Referenzseite.
Verwenden viewport meta-Tag hat keine Auswirkung auf die Anpassung und Einstellung der Textgröße user-scalable: no funktioniert nicht einmal in IOS Safari.
8578200cookie-checkBehalten Sie die HTML-Schriftgröße bei, wenn die iPhone-Ausrichtung von Hoch- auf Querformat wechseltyes