Behalten Sie die HTML-Schriftgröße bei, wenn die iPhone-Ausrichtung von Hoch- auf Querformat wechselt

Lesezeit: 3 Minuten

Behalten Sie die HTML Schriftgrose bei wenn die iPhone Ausrichtung von Hoch
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;
}
<ul>
    <li id="home" class="active">
      <a href="https://stackoverflow.com/questions/2710764/home.html">HOME</a>
    </li>
    <li id="home" class="active">
      <a href="test.html">TEST</a>
    </li>
</ul>

1645830127 493 Behalten Sie die HTML Schriftgrose bei wenn die iPhone Ausrichtung von Hoch
Matt Stevens

Sie können dieses Verhalten über die deaktivieren -webkit-text-size-adjust CSS-Eigenschaft:

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

Die Verwendung dieser Eigenschaft wird weiter unten beschrieben Leitfaden für Safari-Webinhalte.

  • 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)

    – Dan

    19. Dezember 2012 um 7:42 Uhr

  • NICHT verwenden noneverwenden 100% stattdessen, das ist das gewünschte Verhalten: blog.55minutes.com/2012/04/iphone-text-resizing

    – fregante

    8. November 2013 um 17:55 Uhr


  • 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.

1645830127 708 Behalten Sie die HTML Schriftgrose bei wenn die iPhone Ausrichtung von Hoch
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

Behalten Sie die HTML Schriftgrose bei wenn die iPhone Ausrichtung von Hoch
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?):

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

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:

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

Sie können ein Meta in den HTML-Header einfügen:

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

1645830128 570 Behalten Sie die HTML Schriftgrose bei wenn die iPhone Ausrichtung von Hoch
Manu

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.

1645830128 169 Behalten Sie die HTML Schriftgrose bei wenn die iPhone Ausrichtung von Hoch
Radek Matěj

Stand März 2019 Textgröße anpassen hat eine vernünftige Unterstützung unter den mobilen Browsern.

body {
  text-size-adjust: none;
}

Verwenden viewport meta-Tag hat keine Auswirkung auf die Anpassung und Einstellung der Textgröße user-scalable: no funktioniert nicht einmal in IOS Safari.

857820cookie-checkBehalten Sie die HTML-Schriftgröße bei, wenn die iPhone-Ausrichtung von Hoch- auf Querformat wechselt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy