モバイル Web 開発ピクセルと DPR_html/css_WEB-ITnose

× カタログ [1] 定義 [2] 分類 [3] 3P [4] Zoom [5] DPR [6] API

前の単語

ピクセルはWeb開発でほぼ毎日使用されますが、正確には何ですかピクセル、モバイルとデスクトップのピクセルに違いはありますか? スケーリングはピクセルに影響しますか? Retina スクリーンとピクセルの関係は何ですか?これらの問題については、明確ではないかもしれません。この記事では、ピクセルに関する関連知識を紹介します

定義

ピクセルとも呼ばれるピクセルは、英語の「ピクセル」から翻訳された画像表示の基本単位であり、ピクスは英語の単語pictureの一般的な略語です、英語の単語「要素」「要素」を加えると、ピクセルが得られます。したがって、「ピクセル」は「画像要素」を意味し、ペル（画像要素）とも呼ばれます

ピクセルはWebページのレイアウトの基礎です。ピクセルとは、コンピューターが特定の色を表示できる最小領域です。デバイスサイズが同じでも画素が高密度になると、画面の遷移がより細かく表示され、Webサイトがより鮮明に見えます。

//ppi とは、画面上 1 インチあたりに表示できるピクセル数、つまり画面のピクセル密度のこと

分類

実はピクセルにはデバイスピクセルと CSS ピクセルの 2 種類があります

1. デバイス ピクセル (デバイス非依存ピクセル): デバイス画面の物理ピクセルの数は固定です

2. CSS ピクセル (CSS ピクセル): 論理ピクセルとも呼ばれ、デバイス用に作成されます。 Web 開発者は、CSS や JavaScript で使用される抽象レイヤー

//我们通过CSS和javascript代码设置的像素都是逻辑像素width:300px;font-size: 16px;

DP/PT/SP

DP、PT、SP の 3 つの概念を 3P と呼ぶ人もいますが、これは新しい用語のようです。実は、それは物理ピクセルの3つの名前です

IOSでは物理ピクセルはPT(Point、ディスプレイポイント)と呼ばれます

AndroidではDP/DiP(Device Independent Pixel、デバイス独立ピクセル)と呼ばれます

SP (スケールに依存しないピクセル) はスケーリングです。DP や PT などの無関係なピクセルは物理ピクセルですが、これらはフォントのサイズを表すために使用されます。たとえば、携帯電話の画面解像度のピクセル単位は物理ピクセルを指します。 iPhone 5s の解像度は 1136*640 です。実際には 1136pt*640pt です

Scale

デスクトップでは、CSS の 1 ピクセルがコンピューター画面の 1 物理ピクセルに対応することがよくあります。

//CSS ピクセルがデバイス ピクセルを完全にカバーします

携帯電話では、画面サイズの制限により、スケーリング操作が頻繁に行われます。

//デバイスピクセル（濃い青色の背景）、CSSピクセル（半透明の背景）

//左の図は、ユーザーがズームアウトすると、1つのデバイスピクセルが複数のCSSピクセルをカバーすることを示しています

//右の図は、ユーザーはズームアウトします。ズームインすると、1 つの CSS ピクセルが複数のデバイス ピクセルをカバーします

ズームインまたはズームアウトしても、要素によって設定された CSS ピクセル (幅: 300px など) は常にCSS ピクセルが対応するデバイス ピクセルの数は、現在のスケーリング比に基づいて決定されます

DPR

デバイス ピクセル比 DPR (devicePixelRatio) は、2 つのピクセルの比率です

DPR = 设备像素 / CSS像素(某一方向上)

モバイル デバイスでは、デバイスのピクセルと CSS ピクセルが常に等しいため、DPR の概念はありませんでした。テクノロジーの発展に伴い、モバイルデバイスの画面ピクセル密度はますます高くなっています。 iPhone 4 から、Apple はいわゆる Retina スクリーンを導入しました。スクリーンの PPI (スクリーン ピクセル密度) が高すぎて、人間の網膜がスクリーン上のピクセルを区別できないため、網膜スクリーンと呼ばれます。 iPhone4の解像度は2倍になりましたが、画面サイズは変わりません。これは、同じサイズの画面では2倍のピクセルがあることを意味します。つまり、DPR = 2

iPhone5を例に挙げると、iPhone5のデバイス解像度は次のようになります。は 640dp*1136dp ですが、CSS は 320px*568px で表されます。つまり、iphone5のDPI=2

    640(dp) / 320(px)  = 2    1136(dp) / 568(px) = 2    640(dp)*1136(dp) /  320(px)*568(px) = 4

API

画面デバイスピクセルとデバイスピクセル比DPRには、対応するJavaScriptプロパティがあります

    screen.width 屏幕宽度    screen.height 屏幕高度    window.devicePixelRatio 设备像素比

【注】各CSS宣言とほぼすべてのJavaScriptプロパティはすべてCSS ピクセルを使用します。唯一の例外は screen.width と screen.height です

したがって、iPhone5 の物理ピクセルは 568px*320px、デバイスのピクセル比 DPR は 2、CSS ピクセルは 1136px*640px です