简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

タブレットでの CSS メディア クエリの方向のジレンマを克服する方法: アスペクト比で解決する?

Susan Sarandon
リリース： 2024-10-26 07:33:02
オリジナル
997 人が閲覧しました

How to Overcome the CSS Media Query Orientation Dilemma on Tablets: Aspect Ratios to the Rescue?

CSS メディア クエリの方向のジレンマ: 解決策を見つける

複数のタブレット デバイスを使用する場合、デバイスの方向を適用するために CSS メディア クエリに依存します。ベースのスタイルは課題を引き起こす可能性があります。この問題は、テキスト入力中にソフト キーボードが表示されると発生します。これにより、デバイスが縦向きモードであるにもかかわらず、表示される Web ページが縮小され、横向きベースの CSS の適用がトリガーされます。

一般的な解決策は、クラスを追加することです。 HTML 要素と、デバイスの方向に基づいたターゲット固有のクラス:

<code class="html"><html class="landscape">
  <body>
    <h1 class="landscape-only">Element Heading - Landscape</h1>
    <h1 class="portrait-only">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>
ログイン後にコピー

ただし、より汎用性の高いアプローチは、アスペクト比をターゲットとするメディア クエリを利用することにあります。横向きモードの場合:

<code class="css">@media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */}</code>
ログイン後にコピー

縦向きモードの場合:

<code class="css">@media screen and (max-aspect-ratio: 13/9) { /* portrait styles here */}</code>
ログイン後にコピー

この方法では、ソフト キーボードの有無に関係なく、一貫したエクスペリエンスが保証されます。その有効性は、方向ベースのメディア クエリとは異なり、キーボードの高さの影響を受けないという事実に起因すると考えられます。

以上がタブレットでの CSS メディア クエリの方向のジレンマを克服する方法: アスペクト比で解決する?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn
前の記事：明示的な `line-height` を使用せずに要素でテキストの垂直配置を実現するにはどうすればよいですか? 次の記事：Div 要素のマージンが重なっているのはなぜですか?どうすれば修正できますか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1681
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1833
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1560
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1466
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1517
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！