ソフト キーボードにより方向スタイルが崩れる: どうすれば修正できるでしょうか?

CSS メディア クエリ: ソフト キーボードによる方向ルールの中断 – 代替ソリューション

この問題は、CSS メディア クエリを使用して方向ベースのルールを適用するときに発生します。タブレットデバイスのスタイル。この問題は、ユーザーが入力フィールドをタップしてソフト キーボードが表示されるときに発生します。 Web ページの表示領域が減少し、ページが縦モードではなく横モード CSS で表示されます。

考えられる解決策の 1 つは、(方向: 縦) および (方向: 横) メディアを削除することです。クエリ。代わりに、ランドスケープ モードには (min-aspect-ratio: 13/9) メディア クエリを使用し、ポートレート モードには (max-aspect-ratio: 13/9) メディア クエリを使用します。これらのクエリでは、デバイスの方向ではなく、ビューポートのアスペクト比を指定します。

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

別のアプローチでは、現在の方向に基づいて html 要素にクラスを割り当て、CSS でそれらのクラスをターゲットにします。

<code class="html">

    <h1 id="Element-Heading-Landscape">Element Heading - Landscape</h1>
    <h1 id="Element-Heading-Portrait">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>

このソリューションでは、方向の変更に基づいてクラスの追加と削除を処理するために JavaScript が必要です。

以上がソフト キーボードにより方向スタイルが崩れる: どうすれば修正できるでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。