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: cover
lub jawnie ustaw na background-size
wartoś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 px
jednostka 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.
width=device-width
rozciągnę ją do pełnego ekranu?background-image
, możesz je łączyć-webkit-background-size:50%
, ponieważ w przeciwnym razie rozmiar obrazu będzie zgodny z logiczną liczbą pikseli. w3.org/TR/2002/WD-css3-background-20020802/#background-sizebackground-size
sztuczki optymalnego wykorzystania wyświetlacza.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
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
iphone 5s
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/
źródło
width: 100%
będzie obejmował całą szerokość wyświetlacza. Nie będzie rozciągany. Ekran „myśli”, że jest to wyświetlacz o rozdzielczości 300 pikseli. Obrazy są wyświetlane zgodnie z rozdzielczością logiczną / css. Teraz w swoim przykładzie możesz zamiast tego podać obraz o rozdzielczości 600 pikseli. Będzie to pełna szerokość logicznego wyświetlacza 300px, ale ponieważ twój wyświetlacz ma natywne 600px, obraz będzie wyglądał dwa razy ostrzej niż oryginalny obraz 300px. Większy obraz, ale wygląda lepiej, ponieważ wyświetlacz ma wszystkie te dodatkowe piksele. To jest idea stojąca za „wyświetlaczami Retina”.https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio
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).
źródło
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
.źródło