デバイスの向きに関する CSS メディアクエリに対するソフトキーボードの干渉の問題をどのように克服できますか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

デバイスの向きに関する CSS メディアクエリに対するソフトキーボードの干渉の問題をどのように克服できますか?

Linda Hamilton

Oct 26, 2024 am 08:37 AM

How can you overcome the issue of soft-keyboard interference with CSS media queries for device orientation?

CSS メディアクエリとデバイスの向き: ソフトキーボードの問題の克服

はじめに

CSS のメディアクエリは、方向などのデバイスの機能に基づいてスタイルを適用するための強力なメカニズムを提供します。ただし、特定のデバイスでは、ソフトキーボードがこれらの方向ルールに干渉し、Web ページが正しく表示されない可能性があります。この記事では、この問題に対処するための代替ソリューションを検討します。

向きのメディアクエリ

メディアクエリは、次の構文を使用して縦向きと横向きをターゲットにするために使用できます。

<code class="css">@media all and (orientation:portrait) { /* Portrait styles */ }

@media all and (orientation:landscape) { /* Landscape styles */ }</code>

ログイン後にコピー

このアプローチはほとんどのデバイスでうまく機能しますが、ソフトキーボードを縦向きモードで開くと失敗します。表示領域が減少すると、ページが強制的に横向きでレンダリングされ、レイアウトが崩れます。

代替解決策

1 つの代替案は、JavaScript を使用してソフトキーボードと方向ベースのスタイルを動的に適用します。これは、ブラウザウィンドウの高さを返す window.innerHeight プロパティを使用して実現できます。ソフトキーボードが開かれると、ウィンドウの高さが減少し、JavaScript 関数がトリガーされます。

<code class="js">window.addEventListener('resize', function() {
  if (window.innerHeight < screen.height) {
    // Soft-keyboard is open
    document.documentElement.classList.add('soft-keyboard-open');
  } else {
    // Soft-keyboard is closed
    document.documentElement.classList.remove('soft-keyboard-open');
  }
});

ログイン後にコピー

ソフトキーボードが検出されると、CSS クラスをに適用できます。カスタムスタイルで縦向きまたは横向きをターゲットにする要素:

<code class="css">.soft-keyboard-open.portrait { /* Portrait styles with soft-keyboard open */ }

.soft-keyboard-open.landscape { /* Landscape styles with soft-keyboard open */ }

.portrait { /* Standard portrait styles */ }

.landscape { /* Standard landscape styles */ }</code>

ログイン後にコピー

その他のオプション

元の質問で言及されている別のオプションは、クラスを

<code class="html"><html class="landscape">
  ...
</html>

.landscape .landscape-only { display:block; }
.landspace .portrait-only  { display:none; }
.portrait .portrait-only   { display:block; }
.portrait .landscape-only  { display:none; }</p></code>

ログイン後にコピー

このアプローチでは、JavaScript を使用しての class 属性を設定する必要があります。方向に基づく要素。特に標準以外の画面サイズのデバイスでは、@media クエリのアプローチほど信頼性が低い可能性があります。

最近の進歩

最近では、新しいメディアクエリ機能が登場しました。ソフトキーボードの問題を発生させずに方向検出をより適切にサポートする機能が導入されました。これらには次のものが含まれます: