Heim > Artikel > Web-Frontend > Wie überwindet man das Dilemma der CSS-Medienabfrageausrichtung auf Tablets: Seitenverhältnisse helfen?

Wie überwindet man das Dilemma der CSS-Medienabfrageausrichtung auf Tablets: Seitenverhältnisse helfen?

Susan SarandonOriginal: 2024-10-26 07:33:02982Durchsuche

How to Overcome the CSS Media Query Orientation Dilemma on Tablets: Aspect Ratios to the Rescue?

CSS-Medienabfrage-Ausrichtungsdilemma: Eine Lösung finden

Wenn Sie mit mehreren Tablet-Geräten arbeiten, verlassen Sie sich bei der Anwendung der Geräteausrichtung auf CSS-Medienabfragen. basierte Stile können eine Herausforderung darstellen. Das Problem tritt auf, wenn während der Texteingabe eine Softtastatur angezeigt wird, die die sichtbare Webseite verkleinert und die Anwendung von Querformat-CSS auslöst, obwohl sich das Gerät im Hochformat befindet.

Eine gängige Lösung besteht darin, Klassen hinzuzufügen das HTML-Element und zielen auf spezifische Klassen basierend auf der Geräteausrichtung ab:

<code class="html"><html class="landscape">
  <body>
    <h1 class="landscape-only">Element Heading - Landscape</h1>
    <h1 class="portrait-only">Element Heading - Portrait</h1></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>

Ein vielseitigerer Ansatz liegt jedoch in der Verwendung von Medienabfragen, die auf Seitenverhältnisse abzielen. Für den Querformatmodus:

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

Für den Hochformatmodus:

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

Diese Methode gewährleistet ein konsistentes Erlebnis, unabhängig vom Vorhandensein einer Softtastatur. Seine Wirksamkeit lässt sich auf die Tatsache zurückführen, dass es im Gegensatz zu den orientierungsbasierten Medienabfragen unempfindlich gegenüber der Höhe der Tastatur bleibt.

Das obige ist der detaillierte Inhalt vonWie überwindet man das Dilemma der CSS-Medienabfrageausrichtung auf Tablets: Seitenverhältnisse helfen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html for this 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 erreichen „Elemente“ eine vertikale Textausrichtung ohne explizite „Zeilenhöhe“?Nächster Artikel：Wie erreichen „Elemente“ eine vertikale Textausrichtung ohne explizite „Zeilenhöhe“?

In Verbindung stehende Artikel

Mehr sehen