How to Overcome the CSS Media Query Orientation Dilemma on Tablets: Aspect Ratios to the Rescue?-CSS Tutorial-php.cn

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

Susan Sarandon

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

Original

1059 people have browsed it

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

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>

Copy after login

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

Copy after login

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>

Copy after login

For portrait mode:

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

Copy after login

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!