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-m
edia-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