Heim > Artikel > Web-Frontend > Soft-Tastatur stört Orientierungsstile: Wie können wir das beheben?

Soft-Tastatur stört Orientierungsstile: Wie können wir das beheben?

Mary-Kate OlsenOriginal: 2024-10-26 17:20:03821Durchsuche

Soft Keyboard Disrupts Orientation Styles: How Can We Fix It?

CSS-Medienabfrage: Soft-Tastatur stört Orientierungsregeln – eine alternative Lösung

Das Problem tritt auf, wenn CSS-Medienabfragen zur orientierungsbasierten Anwendung verwendet werden Stile auf Tablet-Geräten. Das Problem tritt auf, wenn der Benutzer auf ein Eingabefeld tippt, wodurch die Softtastatur angezeigt wird. Der sichtbare Bereich der Webseite wird verkleinert, wodurch die Seite im Querformat-CSS statt im Hochformat angezeigt wird.

Eine mögliche Lösung könnte darin bestehen, die Medien (Ausrichtung: Hochformat) und (Ausrichtung: Querformat) zu entfernen Abfragen. Verwenden Sie stattdessen die Medienabfrage (min-aspect-ratio: 13/9) für den Querformatmodus und die Medienabfrage (max-aspect-ratio: 13/9) für den Hochformatmodus. Diese Abfragen geben das Seitenverhältnis des Ansichtsfensters anstelle der Geräteausrichtung an.

<code class="css">@media screen and (min-aspect-ratio: 13/9) {
  /* Landscape styles here */
}

@media screen and (max-aspect-ratio: 13/9) {
  /* Portrait styles here */
}</code>

Ein anderer Ansatz besteht darin, dem HTML-Element Klassen basierend auf der aktuellen Ausrichtung zuzuweisen und diese Klassen im CSS gezielt anzusprechen.

<code class="html"><html class="landscape">
<body>
    <h1 class="landscape-only">Element Heading - Landscape</h1>
    <h1 class="portrait-only">Element Heading - Portrait</h1>
</body>
</html></code>

<code class="css">.landscape .landscape-only { display:block; }
.landspace .portrait-only  { display:none; }
.portrait .portrait-only   { display:block; }
.portrait .landscape-only  { display:none; }</code>

Diese Lösung erfordert JavaScript, um das Hinzufügen und Entfernen von Klassen basierend auf der Ausrichtungsänderung zu verarbeiten.

Das obige ist der detaillierte Inhalt vonSoft-Tastatur stört Orientierungsstile: Wie können wir das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html for using class this display viewport input issue

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie kann ich die Größe von SVGs dynamisch anpassen, um sie an übergeordnete Container anzupassen?Nächster Artikel：Wie kann ich die Größe von SVGs dynamisch anpassen, um sie an übergeordnete Container anzupassen?

In Verbindung stehende Artikel

Mehr sehen