Geliştirici Araçları erişim 9* *sekme konsol Krom bu mesajı aldım:

'Dppx' birim 'yerine' CSS 'dpi' demek gibi dpı kullanarak düşünün uygun değil yani nokta-başına-CSS-inç, nokta-başına-fiziksel-inç değil, gerçek bir ekran. dpi Medya sorgu ifadesinde: tek ekran ve (-y-min-piksel oranı aygıtı: 2), hepsi değil, hepsi değil, sadece screen and (min-resolution: 192dpi), yalnızca ekran ve (dk-çözünürlük: 2dppx)

Bu bir uyarı ya da hata olduğunu sanmıyorum yani mavi renkli. Neden bu mesajı ile karşılaştınız mı? Nasıl sadece jsfiddle sorundan kurtulmak ya da kendisi alabilir miyim?

Bu Elma görüntüler Retina ile ilgili, ama belki de sınırlı değildir. Bu görüntüler daha önce kullanılan ekranlar daha yüksek bir piksel yoğunluğu var ama tarayıcı hala eğer piksel aynı sayıda gibi davranır.

E. g. iPhone 3G 320 bir ekran x 480 piksel ama iPhone 4 ile serbest bırakıldı 640 x 960 piksel vardı. Ancak, bu çözünürlükte web sitesi göstermek yerine tarayıcı çözünürlüğü 320 x 480 piksel varmış gibi davranıyordum.

Bu CSS-piksel icadı yol açar. Sana bir şey CSS width:100px olduğunu belirtirseniz normal bir ekran üzerinde 100 fiziksel piksel olacak ama 200 fiziksel bir retina ekran üzerinde piksel. Bir iPhone 3G ve iPhone 4 de aynı dpi (olarak dayandığı gibi CSS-piksel) ama çok farklı dppx (temel alan gerçek fiziksel piksel).

dppx bir istemci istemcinin tarayıcısında bu yüksek piksel yoğunluğu yok gibi davrandığı bile yüksek piksel yoğunluklu bir ekran ve farklı bir stil sunarken algılamak için kullanabilirsiniz.

 .comp {
     background-image: url(image.png);
 }

 @media only screen and (min-resolution: 2dppx) {
     .comp {
         background-image: url(image@2x.png);
     }
 }

Daha fazla bilgi burada CSS-piksel: https://developer.mozilla.org/en-US/docs/Web/CSS/resolution