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 を使用してローカルシステム時間を取得する