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

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 <p>ソフト キーボードが検出されると、CSS クラスを  に適用できます。カスタム スタイルで縦向きまたは横向きをターゲットにする要素:</p>
<pre class="brush:php;toolbar:false"><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">
  ...


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

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

最近の進歩

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

• 最小アスペクト比と最大アスペクト比
• 方向ロックと方向ロック解除

より正確なソフト キーボードが開いているときの画面の向きと動作をターゲットにします。

結論

向きに関する CSS メディア クエリを妨げるソフト キーボードの問題は、一般的な課題です。上記で説明した代替ソリューションを実装することで、開発者はソフト キーボードを備えたデバイス上で Web ページの一貫したレンダリングを保証し、より良いユーザー エクスペリエンスを提供できます。

以上がデバイスの向きに関する CSS メディア クエリに対するソフト キーボードの干渉の問題をどのように克服できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。