Behalten Sie die HTML-Schriftgröße bei, wenn sich die iPhone-Ausrichtung von Hochformat zu Querformat ändert

Ich habe eine mobile Webanwendung mit einer ungeordneten Liste, die mehrere Listenelemente mit einem Hyperlink in jedem Li enthält:

... Meine Frage ist, wie ich die Hyperlinks so formatieren kann, dass sie sich beim Betrachten auf einem iPhone NICHT ändern und das Beschleunigungsmesser von Hochformat -> Querformat wechselt. Im Moment habe ich die Hyperlink-Schriftgröße auf 14px festgelegt, aber wenn ich zum Querformat wechsle, wird sie auf 20px vergrößert. Ich möchte, dass die Schriftgröße gleich bleibt. Hier ist der Code:

ul li a
{
  font-size:14px;
  text-decoration: none;
  color: #cc9999;
}

<ul>
  <li id="home" class="active">
    <a href="home.html">HOME</a>
  </li>
  <li id="home" class="active">
    <a href="test.html">TEST</a>
  </li>
</ul>

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

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

Die Verwendung dieser Eigenschaft wird im Safari Web Content Guide näher beschrieben .

Hinweis: Wenn Sie verwenden

html {
    -webkit-text-size-adjust: none;
}

In diesem Fall wird das Zoomverhalten in Standardbrowsern deaktiviert. Eine bessere Lösung ist:

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

Dies korrigiert das iPhone / iPad-Verhalten, ohne das Desktop-Verhalten zu ändern.

Verwenden von -webkit-text-size-adjust: keine; Direkt auf HTML wird die Möglichkeit zum Zoomen von Text in allen Webkit-Browsern unterbrochen. Sie sollten dies mit einigen Medienabfragen kombinieren, die für iOS spezifisch sind. Beispielsweise:

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

Wie bereits erwähnt, CSS-Regel

 -webkit-text-size-adjust: none

funktioniert nicht mehr in modernen Geräten.

Glücklicherweise gibt es eine neue Lösung für iOS5 und iOS6 ( Aufgabe : 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 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 dem HTML-Header ein Meta hinzufügen:

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

Sie können sich auch für einen CSS-Reset wie normalize.css entscheiden , der 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-Telefon.

Aktuelle Informationen zur Implementierung in verschiedenen Browsern finden Sie auf der MDN-Referenzseite .

Der folgende Code funktioniert für mich.

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

Versuchen Sie, den Browser-Cache zu leeren, wenn dies nicht funktioniert.

Ab März 2019 text-size-adjust hat eine angemessene Unterstützung unter mobilen Browsern .

body {
  text-size-adjust: none;
}

Die Verwendung von viewportMeta-Tags hat keine Auswirkungen auf die Anpassung der Textgröße und die Einstellung user-scalable: no funktioniert nicht einmal in IOS Safari .

In meinem Fall war dieses Problem darauf zurückzuführen, dass ich das CSS-Attribut width: 100%für das HTML-Tag verwendet habe input type="text".

Ich habe den Wert widthauf 60% geändert und hinzugefügt padding-right:38%.

input {
    padding-right: 38%;
    width: 60%;
}