ini disebutkan setiap artikel tentang web seluler, tetapi tidak ada tempat saya dapat menemukan penjelasan tentang apa sebenarnya ukuran atribut ini.
Adakah yang bisa menjelaskan hal-hal seperti ini?

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {

    //high resolution images go here

}

Jawaban singkat

Rasio piksel perangkat adalah rasio antara piksel fisik dan piksel logis. Misalnya, iPhone 4 dan iPhone 4S melaporkan rasio piksel perangkat 2, karena resolusi linear fisik dua kali lipat resolusi linear logis.

• Resolusi fisik: 960 x 640
• Resolusi logis: 480 x 320

Rumusnya adalah:

Dimana:

adalah resolusi linear fisik

dan:

adalah resolusi linear logis

Perangkat lain melaporkan rasio piksel perangkat yang berbeda, termasuk yang non-integer. Misalnya, Nokia Lumia 1020 melaporkan 1,6667, Samsumg Galaxy S4 melaporkan 3, dan Apple iPhone 6 Plus melaporkan 2,46 (sumber: dpilove ) . Tapi ini pada dasarnya tidak mengubah apa pun, karena Anda tidak boleh mendesain untuk satu perangkat tertentu.

Diskusi

CSS "pixel" bahkan tidak didefinisikan sebagai "salah satu elemen gambar pada beberapa layar", melainkan sebagai pengukuran sudut non-linear dari sudut pandang, yang kira-kira satu inci di lengan panjang. Sumber: Panjang Absolut CSS

Ini memiliki banyak implikasi ketika datang ke desain web, seperti menyiapkan sumber daya gambar definisi tinggi dan hati-hati menerapkan gambar yang berbeda pada rasio piksel perangkat yang berbeda. Anda tidak ingin memaksa perangkat kelas bawah untuk mengunduh gambar beresolusi sangat tinggi, hanya untuk menurunkannya secara lokal. Anda juga tidak ingin perangkat kelas atas untuk meningkatkan gambar beresolusi rendah untuk pengalaman pengguna yang buram.

Jika Anda terjebak dengan gambar bitmap, untuk mengakomodasi banyak rasio piksel perangkat yang berbeda, Anda harus menggunakan CSS Media Queries untuk menyediakan rangkaian sumber daya yang berbeda untuk berbagai kelompok perangkat. Gabungkan ini dengan trik yang bagus seperti background-size: coveratau secara eksplisit mengatur nilai background-sizepersentase ke.

Contoh

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

Dengan cara ini, setiap jenis perangkat hanya memuat sumber daya gambar yang benar. Perlu diingat juga bahwa pxunit dalam CSS selalu beroperasi pada piksel logis .

Wadah untuk grafik vektor

Semakin banyak jenis perangkat yang muncul, semakin sulit untuk menyediakan semuanya dengan sumber daya bitmap yang memadai. Di CSS, permintaan media saat ini adalah satu-satunya cara, dan di HTML5, elemen gambar memungkinkan Anda menggunakan sumber yang berbeda untuk permintaan media yang berbeda, tetapi dukungannya masih belum 100% karena sebagian besar pengembang web masih harus mendukung IE11 untuk sementara waktu ( sumber: caniuse ) .

Jika Anda membutuhkan gambar yang tajam untuk ikon, garis-seni, elemen desain yang bukan foto , Anda harus mulai memikirkan SVG, yang diskalakan dengan indah ke semua resolusi.

Rasio Pixel Perangkat == Rasio Pixel CSS

Dalam dunia pengembangan web, rasio piksel perangkat (juga disebut CSS Pixel Ratio) adalah yang menentukan bagaimana resolusi layar perangkat ditafsirkan oleh CSS.

CSS peramban menghitung resolusi logis (atau ditafsirkan) perangkat dengan rumus:

Sebagai contoh:

Apple iPhone 6s

• Resolusi Sebenarnya: 750 x 1334
• Rasio Pixel CSS: 2
• Resolusi logis:

Saat melihat halaman web, CSS akan berpikir perangkat memiliki layar resolusi 375x667 dan Media Queries akan merespons seolah-olah layarnya adalah 375x667 . Tetapi elemen yang diberikan pada layar akan dua kali lebih tajam dari layar 375x667 yang sebenarnya karena ada dua kali lebih banyak piksel fisik di layar fisik.

Beberapa contoh lain:

Samsung Galaxy S4

• Resolusi Sebenarnya: 1080 x 1920
• Rasio Pixel CSS: 3
• Resolusi logis:

iPhone 5s

• Resolusi Sebenarnya: 640 x 1136
• Rasio Pixel CSS: 2
• Resolusi logis:

Mengapa Rasio Piksel Perangkat ada?

Alasan rasio piksel CSS dibuat karena layar ponsel mendapatkan resolusi yang lebih tinggi, jika setiap perangkat masih memiliki rasio piksel CSS 1, maka halaman web akan terlalu kecil untuk dilihat.

Monitor desktop layar penuh tipikal adalah sekitar 24 "pada resolusi 1920x1080. Bayangkan jika monitor itu menyusut menjadi sekitar 5" tetapi memiliki resolusi yang sama. Melihat hal-hal di layar tidak mungkin karena ukurannya sangat kecil. Tapi manufaktur keluar dengan layar ponsel beresolusi 1920x1080 secara konsisten sekarang.

Jadi, rasio piksel perangkat ditemukan oleh pembuat ponsel sehingga mereka dapat terus mendorong resolusi, ketajaman, dan kualitas layar ponsel, tanpa membuat elemen pada layar terlalu kecil untuk dilihat atau dibaca.

Berikut adalah alat yang juga memberi tahu Anda kerapatan piksel perangkat Anda saat ini:

http://bjango.com/articles/min-device-pixel-ratio/

https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio

-moz-device-pixel-ratio
Memberikan jumlah piksel perangkat per piksel CSS.

ini hampir menjelaskan sendiri. angka tersebut menggambarkan rasio berapa banyak piksel "nyata" (piksel fisik layar) digunakan untuk menampilkan satu piksel "virtual" (ukuran ditetapkan dalam CSS).

Artikel Boris Smus Gambar DPI Tinggi untuk Piksel Variabel Kepadatan memiliki definisi rasio piksel perangkat yang lebih akurat: jumlah piksel perangkat per piksel CSS adalah perkiraan yang baik, tetapi tidak keseluruhan cerita.

Perhatikan bahwa Anda dapat menggunakan DPR dengan perangkat window.devicePixelRatio.