Heim >Web-Frontend >CSS-Tutorial >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:03951Durchsuche
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!