CSS3 メディアクエリにおけるデバイス幅と幅の違いの詳細な説明

CSS3 メディアクエリにおけるデバイス幅と幅の違いの詳細な説明

1.デバイス幅

定義: 出力デバイスの画面表示幅を定義します。

Web ページが Safari で開かれているか、Web ビューに埋め込まれているかに関係なく、device-width はデバイスにのみ関連します。同じデバイスの場合、その値は変わりません。

たとえば、iPhone 6 のデバイス幅 * デバイス高さは 375 * 667 ですが、これは DPR などとは何の関係もありません。

2.幅

定義: 出力デバイスでのページの表示領域の幅を定義します。

出力は、Web ページの表示領域の幅と高さです。Web ページが Webview にネストされたモバイル Web ページであると仮定すると、幅は実際には Webview の幅と高さです。幅と高さがブラウザーによって異なる場合、ページで rem レイアウトを使用し、Retina 画面の場合は dpr>1、メタ タグが content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no,viewport-fit=cover" に設定されていると仮定すると、iPhone 6 上の幅は 750 ピクセルになります。

ここでは、水平画面の状況を考慮する必要がないため、device-width と device-height をより頻繁に使用します。

たとえば、iPhone X に適応したい場合、iPhone X のサイズ (375*812) が既にわかっている場合は、次のステートメントを使用できます。

/*iPhoneX*/
@media 画面のみ、(device-width:375px)、(device-height:812px)、(-webkit-device-pixel-ratio:3) {
    .foriphoneX()
}

もう一つの例は、サムスンの最新の折りたたみ式スクリーンだ。

@media screen および (デバイス幅: 586px) および (デバイス高さ: 820px) {
    html{
        フォントサイズ: 110px !重要;
    }
}

つまり、device-width はデバイスによって変化しません。その値はデバイスの幅に関係します。幅は、レイアウト スキームやコンテナーによって表示が異なる場合があります。ここでは、device-width は js の window.screen.width に相当し、width は js の document.body.clientWidth に相当すると思います。

また、Huaweiの折りたたみ画面に適応した状況を記録しておきたいと思います。現時点では実機がないので、Huaweiの展開画面の解像度は2200*2480であることしかわかっていません。DPRは明確ではないので、device-widthとdevice-heightはわかりません(ここではwidthを使ってクエリすることはできません。理由はビジネスロジックに関係しています)。そのため、device-aspect-ratioを選択しました。

最初はこれをless

@media (デバイスアスペクト比: 55/62) {
    /*適応*/
}    

CSSのデバイスアスペクト比は小数として計算されます

@media (デバイスアスペクト比: 0.887097) {
    /*適応*/
}  

device-aspect-ratioは小数点をサポートしていないため、一致できません

そこで、less が 55/62 の結果を実行しないようにする方法を調べたところ、次のように属性を引用符で囲み、その前にチルダを追加することで実行できることがわかりました。

@media (デバイスアスペクト比: ~"55/62") {
    /*適応部分*/
}

問題は解決しました!

ただし、MDN では device-aspect-ratio の使用は推奨されなくなり、この属性は徐々に廃止される予定です。より良い解決策が見つかった場合は、代替案を使用します。

CSS3 メディアクエリにおける device-width と width の違いについて詳しく説明したのはこれで終わりです。CSS3 device-width に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQL の無効な左結合の問題を解決する方法とその使用上の注意

>>:  HTML で js を使用してローカル システム時間を取得する

推薦する

CentOS 8/RHEL 8 に Cockpit をインストールして使用する方法

Cockpit は、CentOS および RHEL システムで使用できる Web ベースのサーバー管...

Linux Tensorflow2.0のインストール問題を解決する

conda アップデート conda pip で tf-nightly-gpu-2.0-previ...

Mysql 5.6.37 winx64 インストール デュアル バージョン mysql ノート

マシンに MySQL バージョン 5.0 がすでに存在する場合は、最新バージョンの MySQL のイ...

JavaScript の基礎: エラーキャプチャメカニズム

目次序文エラーオブジェクト投げる試して…捕まえて…最後に最終ルールトライ/キャッチパフォーマンスウィ...

高性能なウェブサイトのための14のテクニック

オリジナル: http://developer.yahoo.com/performance/rule...

HTML メタタグの一般的な使用例のコレクション

マタタグとは<meta> 要素は、検索エンジン向けの説明やキーワード、更新頻度など、ペー...

Ubuntuはカーネルモジュールをコンパイルし、その内容はシステムログに反映されます。

目次1.Linuxログインインターフェース2. コードを書く3. Makefileを書く4. コンパ...

Apache SkyWalkingのセルフモニタリングを素早く有効にする方法を説明します

1. Prometheusテレメトリデータを有効にするデフォルトでは、テレメトリは次のように無効にな...

Nginx のインストールと設定ルールの詳細な紹介

目次1. nginxのインストールと操作(Mac OS環境) 2. nginxルールの設定3. コマ...

サブクエリ最適化における MySQL 選択の実装

以下のデモはMySQLバージョン5.7.27に基づいています。 1. MySQLサブクエリ最適化戦略...

Node はあいまい検索用の検索ボックスを実装します

この記事の例では、検索ボックスでファジークエリを実装するためのNodeの具体的なコードを参考までに共...

HTML に埋め込まれた Flash HTML ウェブページ コードに Flash ファイルを埋め込むソリューション (パート 2)

上の記事で、SWFObject V1.5 の使い方の紹介は一旦終了です。これから、SWFObject...

MySQL 8.0 をインストールした後、初めてログインするときにパスワードを変更する問題を解決する

MySQL 8.0.16で初回ログイン時のパスワードを変更する方法を紹介します。 MySQLデータベ...

Webスキル: 複数のIEバージョンの共存ソリューション IETester

私のおすすめ複数のIEバージョンの共存のためのソリューション以前に IE6、IE7、IE8 の共存に...

JS における ES6 継承と ES5 継承の違い

目次継承ES5 プロトタイプ継承ES6 クラス継承両者の違いES5プロトタイプ継承の内部実装ES6 ...