タブレットでの CSS メディア クエリの方向の問題を克服する方法: メディア クエリを放棄する価値はありますか?

代替方法による CSS メディア クエリの向きの問題の解決

CSS メディア クエリは、デバイスの向きに基づいてスタイルを調整する便利な方法を提供します。ただし、特定のタブレット デバイス、特に Android を実行しているデバイスでは、入力中にソフト キーボードが存在すると、この機能が中断される可能性があります。

この問題を回避するための代替ソリューションには、向きを変えるためのメディア クエリの使用を避けることが含まれます。ベースのスタイリング。代わりに、クラスを動的に追加および削除して、デバイスの現在の向きに基づいて特定の要素をターゲットにすることができます。

このアプローチは、「縦」や「横」などのクラスを HTML 要素に割り当てることから始まります。その後、これらのクラスの存在に基づいて要素の表示を制御する CSS ルールが定義されます。例:

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

これにより、メディア クエリに依存することなく、方向に関係なく適切な要素が表示されるようになります。

拡張された代替手段: min-Aspect-Ratio とmax-Aspect-Ratio

より最近の堅牢なソリューションには、画面のアスペクト比をターゲットとするメディア クエリの使用が含まれます。具体的には、次のメディア クエリを使用できます。

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

この方法は、画面のアスペクト比が縦向きと横向きの間で大幅に変化するという事実を利用します。したがって、ソフト キーボードが存在する場合でも、向きに基づいて CSS スタイルを制御する正確かつ信頼性の高い方法が提供されます。

以上がタブレットでの CSS メディア クエリの方向の問題を克服する方法: メディア クエリを放棄する価値はありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。