ホームページ > 記事 > ウェブフロントエンド > ソフト キーボードにより方向スタイルが崩れる: どうすれば修正できるでしょうか?
ソフト キーボードにより方向スタイルが崩れる: どうすれば修正できるでしょうか?
- Mary-Kate Olsenオリジナル
- 2024-10-26 17:20:03821ブラウズ
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。