Bu, mobil web hakkındaki her makaleden bahsedilir, ancak hiçbir yerde bu özelliğin tam olarak neyi ölçtüğüne dair bir açıklama bulamıyorum.
Herkes bu gibi sorguları neyi kontrol edebilir?

@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

}

Kısa cevap

Cihaz piksel oranı, fiziksel pikseller ile mantıksal pikseller arasındaki orandır. Örneğin, iPhone 4 ve iPhone 4S, 2'nin cihaz piksel oranını bildirir, çünkü fiziksel doğrusal çözünürlük mantıksal doğrusal çözünürlüğün iki katıdır.

• Fiziksel çözünürlük: 960 x 640
• Mantıksal çözünürlük: 480 x 320

Formül:

Nerede:

bir fiziksel lineer çözünürlük

ve:

mantıksal doğrusal çözünürlük

Diğer cihazlar, tamsayı olmayanlar da dahil olmak üzere farklı cihaz piksel oranlarını bildirir. Örneğin, Nokia Lumia 1020 1.6667'yi, Samsumg Galaxy S4 3'ü ve Apple iPhone 6 Plus 2.46'yı (kaynak: dpilove ) bildiriyor . Ancak bu, prensipte hiçbir şeyi değiştirmez, çünkü asla belirli bir cihaz için tasarım yapmamalısınız.

Tartışma

CSS "pikseli", "bazı ekranlarda bir resim öğesi" olarak tanımlanmaz, bunun yerine kol uzunluğunda yaklaşık bir inç olan doğrusal olmayan açısal bir görüntüleme açısı ölçümü olarak tanımlanır . Kaynak: CSS Mutlak Uzunlukları

Web tasarımı söz konusu olduğunda, bunun yüksek çözünürlüklü görüntü kaynakları hazırlamak ve farklı aygıt piksel oranlarında farklı görüntüler dikkatlice uygulamak gibi birçok etkisi vardır. Düşük uçlu bir cihazı çok yüksek çözünürlüklü bir görüntü indirmeye zorlamak istemezsiniz, yalnızca yerel olarak küçültmek için. Üst düzey cihazların bulanık bir kullanıcı deneyimi için düşük çözünürlüklü görüntüleri yükseltmesini de istemezsiniz.

Bitmap görüntüleri ile sıkışıp kalırsanız, birçok farklı cihaz piksel oranına uyum sağlamak için farklı cihaz grupları için farklı kaynak setleri sağlamak üzere CSS Medya Sorguları'nı kullanmalısınız . Bunu, yüzdelik değerlere benzeyen background-size: coverveya açıkça ayarlayan hoş numaralarla birleştirin background-size.

Misal

#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'); }
}

Bu şekilde, her aygıt türü yalnızca doğru görüntü kaynağını yükler. Ayrıca, CSS'deki pxbirimin her zaman mantıksal piksellerde çalıştığını unutmayın .

Vektör grafikleri için bir durum

Giderek daha fazla cihaz türü göründükçe, hepsine yeterli bitmap kaynakları sağlamak daha zorlaşır. CSS'de medya sorguları şu anda tek yoldur ve HTML5'te resim öğesi , farklı medya sorguları için farklı kaynaklar kullanmanıza izin verir, ancak çoğu web geliştiricisinin bir süre daha IE11'i desteklemesi gerektiğinden destek hala% 100 değildir ( kaynak: caniuse ) .

Simgeler, hat sanatı, fotoğraf olmayan tasarım öğeleri için net görüntülere ihtiyacınız varsa , tüm çözünürlüklere göre güzelce ölçeklenen SVG'yi düşünmeye başlamanız gerekir.

Cihaz Piksel Oranı == CSS Piksel Oranı

Web geliştirme dünyasında, bir cihazın ekran çözünürlüğünün CSS tarafından nasıl yorumlanacağını belirleyen cihaz piksel oranı (CSS Piksel Oranı olarak da adlandırılır).

Tarayıcının CSS'si, bir cihazın mantıksal (veya yorumlanmış) çözünürlüğünü aşağıdaki formüle göre hesaplar:

Örneğin:

Apple iPhone 6s

• Gerçek Çözünürlük: 750 x 1334
• CSS Piksel Oranı: 2
• Mantıksal Çözünürlük:

Bir web sayfasını görüntülerken, CSS cihazın 375x667 çözünürlüklü bir ekrana sahip olduğunu düşünür ve Medya Sorguları, ekran 375x667 gibi yanıt verir . Ancak ekrandaki görüntülenen öğeler, gerçek bir 375x667 ekranın iki katı kadar keskin olacaktır, çünkü fiziksel ekranda iki kat daha fazla fiziksel piksel vardır.

Diğer bazı örnekler:

Samsung Galaxy s4

• Gerçek Çözünürlük: 1080 x 1920
• CSS Piksel Oranı: 3
• Mantıksal Çözünürlük:

iphone 5s

• Gerçek Çözünürlük: 640 x 1136
• CSS Piksel Oranı: 2
• Mantıksal Çözünürlük:

Cihaz Piksel Oranı neden var?

CSS piksel oranının oluşturulmasının nedeni, telefon ekranları daha yüksek çözünürlükler elde ettiğinden, her cihazın hala 1 CSS piksel oranına sahip olması durumunda web sayfalarının görülemeyecek kadar küçük olmasına neden olur.

Tipik bir tam ekran masaüstü monitörü, 1920x1080 çözünürlükte yaklaşık 24 inç boyutundadır. Bu monitörün yaklaşık 5 "e küçülüp küçülmediğini, ancak aynı çözünürlüğe sahip olup olmadığını hayal edin. Ekranda bir şeyleri görmek imkansız olurdu çünkü çok küçük olacaklardı. Ancak şu anda sürekli olarak 1920x1080 çözünürlüklü telefon ekranlarıyla üretiliyor.

Böylece cihaz piksel oranı telefon üreticileri tarafından icat edildi, böylece ekrandaki öğeleri görmek veya okumak için çok küçük hale getirmeden telefon ekranlarının çözünürlüğünü, keskinliğini ve kalitesini zorlamaya devam edebildiler.

İşte size mevcut cihazınızın piksel yoğunluğunu da söyleyen bir araç:

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

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

-moz-aygıt-piksel oranı
CSS pikseli başına aygıt pikseli sayısını verir.

bu neredeyse kendi kendini açıklıyor. sayı, bir "sanal" pikseli (CSS'de ayarlanan boyut) görüntülemek için "gerçek" piksellerin (ekranın fiziksel pikselleri) ne kadar kullanıldığını gösterir.

Boris Smus'un Değişken Piksel Yoğunlukları için Yüksek DPI Görüntüleri , cihaz piksel oranının daha doğru bir tanımına sahiptir: CSS pikseli başına cihaz pikseli sayısı iyi bir yaklaşımdır, ancak tüm hikaye değildir.

İle bir cihaz tarafından kullanılan DPR'yi alabileceğinizi unutmayın window.devicePixelRatio.