タブレットでの CSS メディアクエリの方向のジレンマを克服する方法: アスペクト比で解決する?-CSSチュートリアル-php.cn

タブレットでの CSS メディアクエリの方向のジレンマを克服する方法: アスペクト比で解決する?

Susan Sarandon

リリース： 2024-10-26 07:33:02

オリジナル

1057 人が閲覧しました

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

CSS メディアクエリの方向のジレンマ: 解決策を見つける

複数のタブレットデバイスを使用する場合、デバイスの方向を適用するために CSS メディアクエリに依存します。ベースのスタイルは課題を引き起こす可能性があります。この問題は、テキスト入力中にソフトキーボードが表示されると発生します。これにより、デバイスが縦向きモードであるにもかかわらず、表示される Web ページが縮小され、横向きベースの CSS の適用がトリガーされます。

一般的な解決策は、クラスを追加することです。 HTML 要素と、デバイスの方向に基づいたターゲット固有のクラス:

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

ログイン後にコピー

ただし、より汎用性の高いアプローチは、アスペクト比をターゲットとするメディアクエリを利用することにあります。横向きモードの場合:

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

ログイン後にコピー

縦向きモードの場合:

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

ログイン後にコピー

この方法では、ソフトキーボードの有無に関係なく、一貫したエクスペリエンスが保証されます。その有効性は、方向ベースのメディアクエリとは異なり、キーボードの高さの影響を受けないという事実に起因すると考えられます。

以上がタブレットでの CSS メディアクエリの方向のジレンマを克服する方法: アスペクト比で解決する?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

タブレットでの CSS メディア クエリの方向のジレンマを克服する方法: アスペクト比で解決する?

タブレットでの CSS メディアクエリの方向のジレンマを克服する方法: アスペクト比で解決する?