🚀 go-pugleaf

W dniu 2016-05-15 o 21:19, Marek pisze:
> Czy ktoś z Was jest w stanie wytłumaczyć mi jak działają piksele na
> urządzeniach mobilnych? [...]

> div {
>      width: 1in;
>      height: 1in;
> }

O fizycznych jednostkach na ekranie lepiej zapomniec. Nie znam metody 
odtworzenia 1:1 fizycznego wymiaru na ekranie bez uprzedniej kalibracji 
monitora czy wyswietlacza. Serwisy, ktore prezentuja czy pozwalaja 
porownywac np telefony w skali naturalnej stosuja najczesciej 
nastepujaca metode kalibracji pocztas pierwszego uzycia: "1) przyloz cos 
o znanym wymiarze (CD, karta kredytowa, banknot) do obrazka na ekranie, 
2) klikaj +/- aż obraz na ekranie pokryje sie z Twoim przedmiotem".


> 96 pikseli na ekranie o szerokości przy gęstości pikseli 493ppi powinny
> dać kwadrat o boku 0.194 cala a nie 2/3 cala jak wyżej napisałem.
>
> Kolejny eksperyment: za pomocą JS zmierzyłem szerokość ekranu (portrait)
> i wyniosła 412px a spodziewałem się 1440px.
>
> O co chodzi????

Potknąłeś się o "pixel-ratio". Przegladarka operuje na abstrakcyjnych 
pikselach CSS-owych ("CSS pixels"). Ktos kiedys sobie policzyl, ze na 
monitorze stojacym w odpowiedniej odleglosci od uzytkownika na jednym 
calu miesci sie 96 pikseli. Taki typowy monitor o gestosci zblizonej do 
96 ppi ma pixel-ratio = 1. Urzadzenia mobilne maja ekrany o duzo 
wyzszych gestosciach i zglaszaja przegladarce wartosci pixel-ratio np. 
2, 3. Nexus 6 ma pixel-ratio = 3.5, dlatego dla przegladarki ekran 
Nexusa 6 ma wymiary 412 x 690 px - kazdy CSS piksel jest "rzutowany" na 
3,5 x 3,5 pikseli fizycznych.

W media queries ekran o duzej gestosci wykrywa sie za pomoca 
nieoficjalnej wlasnosci "device-pixel-ratio" (z prefiksami) lub 
standardowej, choc nie wszedzie wspieranej "resolution", np.

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
   /* Retina stuff */
}
Zrodlo: https://css-tricks.com/snippets/css/retina-display-media-query/
Wsparcie: http://caniuse.com/#feat=css-media-resolution


Przy czym wykrywanie gestosci ma sens glownie przy serwowaniu grafik 
dedykowanych dla duzych gestosci, natomiast wymiarujac serwis zwykle 
wystarczy operowac w media queries na przedzialach szerokosci 
zdefiniowanych w CSS pikselach lub jednostkach relatywnych.

-- 
NotBear