Soft-Tastatur stört Orientierungsstile: Wie können wir das beheben?
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1667
14
1426
52
1328
25
1273
29
1255
24
Ein Vergleich statischer Formanbieter
Apr 16, 2025 am 11:20 AM
Versuchen wir, hier einen Begriff zu prägen: "Statischer Formanbieter". Sie bringen Ihre HTML
Ein Beweis für das Konzept, um Sass schneller zu machen
Apr 16, 2025 am 10:38 AM
Zu Beginn eines neuen Projekts erfolgt die SASS -Zusammenstellung im Blinzeln eines Auges. Dies fühlt sich gut an, besonders wenn es mit Browsersync kombiniert ist, das nachlädt
Wöchentliche Plattformnachrichten: HTML -Ladeattribut, die Haupt -ARIA -Spezifikationen und Wechsel von Iframe zu Shadow Dom
Apr 17, 2025 am 10:55 AM
In der Zusammenfassung der Plattformnachrichten in dieser Woche stellt Chrome ein neues Attribut für das Laden, Zugänglichkeitspezifikationen für Webentwickler und die BBC -Bewegungen ein
Einige praktisch mit dem HTML-Dialogelement
Apr 16, 2025 am 11:33 AM
Ich schaue mir das HTML -Element zum ersten Mal an. Ich habe es für eine Weile dessen bewusst, aber Haven ' Es wurde es noch nicht für einen Dreh genommen. Es hat einige ziemlich cool und
Papierform
Apr 16, 2025 am 11:24 AM
Buy or Build ist eine klassische Technologiedebatte. Das Aufbau von Dingen selbst ist vielleicht billiger, weil Ihre Kreditkartenrechnung keine Werbebuchung gibt, aber
Wohin sollte 'Podcast' -Link abonnieren?
Apr 16, 2025 pm 12:04 PM
Für eine Weile war iTunes der große Hund im Podcasting. Wenn Sie also "Abonnieren Sie Podcast" verlinkt haben, um zu mögen:
Es ist alles in der Kopf
Apr 15, 2025 am 11:01 AM
Der Dokumentkopf ist vielleicht nicht der glamouröseste Teil einer Website, aber was darauf einfließt
Optionen zum Hosting Ihrer eigenen nicht-javaScript-basierten Analysen
Apr 15, 2025 am 11:09 AM
Es gibt eine Menge Analyseplattformen, mit denen Sie Besucher- und Nutzungsdaten auf Ihren Websites verfolgen können. Vielleicht vor allem Google Analytics, das weit verbreitet ist
