ソフトキーボードにより方向スタイルが崩れる: どうすれば修正できるでしょうか?-CSSチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-10-26 17:20:03

オリジナル

901 人が閲覧しました

Soft Keyboard Disrupts Orientation Styles: How Can We Fix It?

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"><html class="landscape">
<body>
    <h1 class="landscape-only">Element Heading - Landscape</h1>
    <h1 class="portrait-only">Element Heading - Portrait</h1>
</body>
</html></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 サイトの他の関連記事を参照してください。