Wspomina się o tym w każdym artykule o sieci mobilnej, ale nigdzie nie mogę znaleźć wyjaśnienia, co dokładnie mierzy ten atrybut.
Czy ktoś może wyjaśnić, co oznacza takie zapytania, jak ta kontrola?

@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

}

Krótka odpowiedź

Współczynnik pikseli urządzenia to stosunek pikseli fizycznych do pikseli logicznych. Na przykład iPhone 4 i iPhone 4S zgłaszają współczynnik pikseli urządzenia wynoszący 2, ponieważ fizyczna rozdzielczość liniowa jest dwukrotnie większa niż logiczna rozdzielczość liniowa.

• Rozdzielczość fizyczna: 960 x 640
• Rozdzielczość logiczna: 480 x 320

Formuła to:

Gdzie:

to fizyczna rozdzielczość liniowa

i:

to logiczna rozdzielczość liniowa

Inne urządzenia zgłaszają różne współczynniki pikseli urządzenia, w tym niecałkowite. Na przykład Nokia Lumia 1020 zgłasza 1,6667, Samsumg Galaxy S4 3, a Apple iPhone 6 Plus 2,46 (źródło: dpilove ) . Ale to w zasadzie niczego nie zmienia, ponieważ nigdy nie powinieneś projektować dla żadnego konkretnego urządzenia.

Dyskusja

CSS „piksel” nie jest jeszcze zdefiniowany jako „jednego elementu obrazu na jakimś ekranie”, ale raczej jako nieliniowy pomiaru kątowego o kącie widzenia, który jest około cala na warunkach rynkowych. Źródło: CSS Absolute Lengths

Ma to wiele konsekwencji, jeśli chodzi o projektowanie stron internetowych, na przykład przygotowywanie zasobów obrazu o wysokiej rozdzielczości i ostrożne stosowanie różnych obrazów przy różnych proporcjach urządzenia. Nie chciałbyś zmuszać urządzenia z niższej półki do pobierania obrazu o bardzo wysokiej rozdzielczości, tylko po to, aby zmniejszyć go lokalnie. Nie chcesz też, aby zaawansowane urządzenia skalowały obrazy o niskiej rozdzielczości w celu niewyraźnego wrażenia użytkownika.

Jeśli utkniesz z obrazami bitmapowymi, aby dostosować się do wielu różnych współczynników pikseli urządzenia, powinieneś użyć CSS Media Queries, aby zapewnić różne zestawy zasobów dla różnych grup urządzeń. Połącz to z fajnymi sztuczkami, takimi jak background-size: coverlub jawnie ustaw na background-sizewartości procentowe.

Przykład

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

W ten sposób każdy typ urządzenia ładuje tylko poprawny zasób obrazu. Pamiętaj również, że pxjednostka w CSS zawsze działa na logicznych pikselach .

Skrzynia na grafikę wektorową

W miarę pojawiania się coraz większej liczby typów urządzeń coraz trudniej jest zapewnić im wszystkim odpowiednie zasoby bitmapowe. W CSS zapytania o media są obecnie jedynym sposobem, aw HTML5 element picture pozwala używać różnych źródeł dla różnych zapytań o media, ale wsparcie nadal nie jest w 100%, ponieważ większość twórców stron internetowych nadal musi obsługiwać IE11 przez jakiś czas ( źródło: caniuse ) .

Jeśli potrzebujesz wyraźnych obrazów ikon, grafiki liniowej, elementów projektu, które nie są zdjęciami , musisz zacząć myśleć o SVG, które pięknie skaluje się do wszystkich rozdzielczości.

Współczynnik pikseli urządzenia == Współczynnik pikseli CSS

W świecie tworzenia stron internetowych współczynnik pikseli urządzenia (zwany także współczynnikiem pikseli CSS) decyduje o tym, jak rozdzielczość ekranu urządzenia jest interpretowana przez CSS.

CSS przeglądarki oblicza logiczną (lub interpretowaną) rozdzielczość urządzenia według wzoru:

Na przykład:

Apple iPhone 6s

• Rzeczywista rozdzielczość: 750 x 1334
• Współczynnik pikseli CSS: 2
• Rozdzielczość logiczna:

Podczas przeglądania strony internetowej CSS pomyśli, że urządzenie ma ekran o rozdzielczości 375x667, a Media Queries zareaguje tak, jakby ekran miał 375x667 . Ale renderowane elementy na ekranie będą dwa razy ostrzejsze niż rzeczywisty ekran 375x667, ponieważ na fizycznym ekranie jest dwa razy więcej fizycznych pikseli.

Kilka innych przykładów:

Samsung Galaxy S4

• Rzeczywista rozdzielczość: 1080 x 1920
• Współczynnik pikseli CSS: 3
• Rozdzielczość logiczna:

iphone 5s

• Rzeczywista rozdzielczość: 640 x 1136
• Współczynnik pikseli CSS: 2
• Rozdzielczość logiczna:

Dlaczego istnieje współczynnik pikseli urządzenia?

Przyczyną powstania współczynnika pikseli CSS jest to, że gdy ekrany telefonów uzyskują wyższe rozdzielczości, gdyby każde urządzenie nadal miało współczynnik pikseli CSS równy 1, strony internetowe renderowałyby się zbyt małe, aby je zobaczyć.

Typowy pełnoekranowy monitor biurkowy ma około 24 cale przy rozdzielczości 1920 x 1080. Wyobraź sobie, że ten monitor został zmniejszony do około 5 cali, ale miał tę samą rozdzielczość. Oglądanie rzeczy na ekranie byłoby niemożliwe, ponieważ byłyby tak małe. Ale producenci konsekwentnie wychodzą teraz z ekranami telefonów o rozdzielczości 1920x1080.

Tak więc współczynnik pikseli urządzenia został wymyślony przez producentów telefonów, aby mogli nadal poprawiać rozdzielczość, ostrość i jakość ekranów telefonów, bez zmniejszania elementów na ekranie, aby można je było zobaczyć lub przeczytać.

Oto narzędzie, które informuje również o gęstości pikseli na Twoim urządzeniu:

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

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

-moz-device-pixel-ratio
Podaje liczbę pikseli urządzenia na piksel CSS.

to jest prawie oczywiste. liczba określa stosunek, ile „rzeczywistych” pikseli (fizycznych pikseli ekranu) jest używanych do wyświetlenia jednego „wirtualnego” piksela (rozmiar ustawiony w CSS).

Artykuł Borisa Smusa High DPI Images for Variable Pixel Densities zawiera dokładniejszą definicję współczynnika pikseli urządzenia: liczba pikseli urządzenia na piksel CSS to dobre przybliżenie, ale nie cała historia.

Pamiętaj, że możesz uzyskać DPR używane przez urządzenie z rozszerzeniem window.devicePixelRatio.