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

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

Susan Sarandon

Freigeben： 2024-10-26 07:33:02

Original

997 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

Für den Hochformatmodus:

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

Nach dem Login kopieren

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!