Home > Article > Web Front-end > How to Overcome the CSS Media Query Orientation Dilemma on Tablets: Aspect Ratios to the Rescue?

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

Susan SarandonOriginal: 2024-10-26 07:33:021065browse

CSS Media Query Orientation Dilemma: Finding a Solution

When working with multiple tablet devices, relying on CSS media queries to apply device orientation-based styles can pose a challenge. The issue arises when a soft-keyboard appears during text input, which shrinks the visible webpage and triggers the application of landscape-based CSS, despite the device being in portrait mode.

A common solution is to add classes to the HTML element and target specific classes based on device orientation:

<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>

However, a more versatile approach lies in utilizing media queries that target aspect ratios. For landscape mode:

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

For portrait mode:

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

This method ensures a consistent experience regardless of the presence of a soft-keyboard. Its efficacy can be attributed to the fact that it remains impervious to the keyboard's height, unlike the orientation-based media queries.

The above is the detailed content of How to Overcome the CSS Media Query Orientation Dilemma on Tablets: Aspect Ratios to the Rescue?. For more information, please follow other related articles on the PHP Chinese website!

css html for this input issue

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How Do `` Elements Achieve Vertical Text Alignment Without Explicit `line-height`?Next article：How Do `` Elements Achieve Vertical Text Alignment Without Explicit `line-height`?

See more

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

Related articles