-
1. Data: 2016-05-15 21:19:35
Temat: Wykrywanie urządzeń w RWD. Ile cali ma cal?
Od: Marek <p...@s...com>
Czy ktoś z Was jest w stanie wytłumaczyć mi jak działają piksele na
urządzeniach mobilnych? Póki co wszelkie moje starania w kierunku
rozszyfrowania jednostek spełzły na niczym. Przygotowałem kod testowy:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="initial-scale=1, width=device-width">
<style>
html, body {
margin: 0;
padding: 0;
}
div {
width: 1in;
height: 1in;
background-color: #ff0000;
}
</style>
<script>
</head>
<body>
<div></div>
</body>
</html>
Rysuję na urządzeniu Nexus 6 (wyświetlacz 1440 x 2560, 493ppi) kwadrat o
boku 1 cala. Mierzę go i... otrzymuję jakieś 2/3 cala!
Skoro na tym etapie coś niezatrybiło to lecę dalej z eksperymentami.
Postanowiłem zmierzyć za pomocą JS wymiary pikselowe tego kwadratu.
Okazało się, że ma ich zaledwie 96!
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????
Czytałem w sieci na ten temat jednakże zwykle trafiałem na dywagacje
metafizyczne. Nic z tego nie rozumiem.
Help!
Pozdrawiam,
Marek
-
2. Data: 2016-05-15 21:26:04
Temat: Re: Wykrywanie urządzeń w RWD. Ile cali ma cal?
Od: Marek <p...@s...com>
P.S.
Wyjaśnię, że początkowo dążyłem do tego aby m.in. na podstawie PPI
wykrywać z jakim urządzeniem mam do czynienia i na tej podstawie
dostarczać odpowiedni CSS. Czyli w uproszczeniu mała rozdzielczość ->
monitor, duża rozdzielczość -> urządzenie przenośne, potrzeba
dostarczenia ortopedycznych buttonów. Niestety ta najłatwiejsza metoda
detekcji nie działa i szczerze mówiąc nie wiem jak sobie poradzić.
-
3. Data: 2016-05-16 01:11:53
Temat: Re: Wykrywanie urządzeń w RWD. Ile cali ma cal?
Od: Kviat <kviat@NIE_DLA_SPAMUneostrada.pl>
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? Póki co wszelkie moje starania w kierunku
> rozszyfrowania jednostek spełzły na niczym. Przygotowałem kod testowy:
(...)
> Czytałem w sieci na ten temat jednakże zwykle trafiałem na dywagacje
> metafizyczne. Nic z tego nie rozumiem.
A to:
https://developer.mozilla.org/en-US/docs/Mozilla/Mob
ile/Viewport_meta_tag
(w treści jest też odnośnik do tego:
http://www.quirksmode.org/blog/archives/2010/04/a_pi
xel_is_not.html)
Chyba dość stary artykuł, ale zakładam że nadal aktualny.
Po szybkim przeczytaniu wygląda na całkiem proste wytłumaczenie, z
wnioskiem, że pixele na urządzeniach mobilnych działają różnie w
zależności od urządzenia, i że pixele css to nie te same pixele co na
urządzeniu :)
Nie miałem do tej pory potrzeby walki z urządzeniami mobilnymi,
poszukałem z ciekawości, a ten opis wydaje mi się wystarczający do
zrozumienia o co chodzi.
Pozdrawiam
Piotr
-
4. Data: 2016-05-16 21:14:14
Temat: Re: Wykrywanie urządzeń w RWD. Ile cali ma cal?
Od: Marek <p...@s...com>
W dniu 16.05.2016 o 01:11, Kviat pisze:
> W dniu 2016-05-15 o 21:19, Marek pisze:
> A to:
>
> https://developer.mozilla.org/en-US/docs/Mozilla/Mob
ile/Viewport_meta_tag
> (w treści jest też odnośnik do tego:
Hej.
Dokładnie ten artykuł czytałem. W wujku Google pojawia się ona jako #1.
Mogę się zgodzić, że 1 piksel CSS może zająć 4 czy 8 czy ... pikseli
urządzenia. Kłopot w tym, że cal ma zawsze 96 pikseli i nigdy nie ma
rozmiaru cala - więc teoria się wali. Oczywiście w szczególności na
monitorze o rozdzielczości 96dpi cal będzie calem.
Po drugie, skoro HTML nie dostaje informacji o rozdzielczości matrycy (w
dpi) to jak się ustala czy mamy użyć CSS jak dla komórek czy jak dla
tabletów czy jak dla desktopów? Nie wyobrażam sobie procesu detekcji na
podstawie sprawdzania w bazie danych nazwy przeglądarki / systemu
operacyjnego i na tej podstawie domniemanie czy to urządzenie należy do
danej grupy.
--
Pozdrawiam,
Marek
-
5. Data: 2016-05-16 21:25:10
Temat: Re: Wykrywanie urządzeń w RWD. Ile cali ma cal?
Od: Borys Pogoreło <b...@p...edu.leszno>
Dnia Mon, 16 May 2016 21:14:14 +0200, Marek napisał(a):
> Po drugie, skoro HTML nie dostaje informacji o rozdzielczości matrycy (w
> dpi) to jak się ustala czy mamy użyć CSS jak dla komórek czy jak dla
> tabletów czy jak dla desktopów? Nie wyobrażam sobie procesu detekcji na
> podstawie sprawdzania w bazie danych nazwy przeglądarki / systemu
> operacyjnego i na tej podstawie domniemanie czy to urządzenie należy do
> danej grupy.
Rozmiar ekranu wykrywasz za pomocą media queries, określając granice od
których mają obowiązywać inne style. To jest podstawa RWD.
--
Borys Pogoreło
borys(#)leszno,edu,pl
-
6. Data: 2016-05-17 19:11:37
Temat: Re: Wykrywanie urządzeń w RWD. Ile cali ma cal?
Od: Marek <p...@s...com>
W dniu 16.05.2016 o 21:25, Borys Pogoreło pisze:
>
> Rozmiar ekranu wykrywasz za pomocą media queries, określając granice od
> których mają obowiązywać inne style. To jest podstawa RWD.
>
No ale jak? Np. resolution ma nieprawdziwe dane. Wymiary CSS ekranów też
są z palca wyssane i mogą podawać. U mnie szerokość ekranu to ponoć
419px (przy 1440px fizycznych). Na jakimś szajsfonie widziałem 320px.
Cale w media queries podają również dziwaczne wartości.
--
Pozdrawiam,
Marek
-
7. Data: 2016-05-17 21:53:28
Temat: Re: Wykrywanie urządzeń w RWD. Ile cali ma cal?
Od: Borys Pogoreło <b...@p...edu.leszno>
Dnia Tue, 17 May 2016 19:11:37 +0200, Marek napisał(a):
> No ale jak? Np. resolution ma nieprawdziwe dane. Wymiary CSS ekranów też
> są z palca wyssane i mogą podawać. U mnie szerokość ekranu to ponoć
> 419px (przy 1440px fizycznych). Na jakimś szajsfonie widziałem 320px.
> Cale w media queries podają również dziwaczne wartości.
Nie licz na to, że ustawisz to sobie co do piksela. Tu chodzi tylko o
zakresy, w jakich pewne elementy przestają być czytelne i trzeba zmienić
ich układ. Zamiast pikseli możesz granice określać po prostu w em, wtedy
zależą od wielkości tekstu, co wydaje się najsensowniejszym podejściem.
Frameworki najczęściej zakładają trzy zakresy - do 768px (telefon), do
1024px (tablet) i powyżej (desktop). Nie zawsze odpowiada to prawdzie, ale
wystarcza. Tu chodzi o czytelnosć, a nie dostosowanie do konkretnego
urządzenia.
--
Borys Pogoreło
borys(#)leszno,edu,pl
-
8. Data: 2016-05-19 11:58:58
Temat: Re: Wykrywanie urządzeń w RWD. Ile cali ma cal?
Od: Marek <p...@s...com>
W dniu 17.05.2016 o 21:53, Borys Pogoreło pisze:
> Nie licz na to, że ustawisz to sobie co do piksela.
Wiesz, pal sześć dokładność co do piksela. Nie w tym rzecz. Urządzenie,
które ma 1440px w poziomie w prortrait jest raportowane jako 419px
(Nexus 6). Nie da się wyliczyć rozdzielczości urządzenia w DPI choćby z
tego względu. Wydaje mi się, że DPI jest najlepszą jednostką do
określania jak duże litery na danym urządzeniu powinno się wyświetlać.
Zupełnie nie rozumiem czemu zafałszowano tą informację w urządzeniach
mimo istnienia parametru resolution w media query.
Aczkolwiek może jest obejście jak piszesz poniżej.
> Tu chodzi tylko o
> zakresy, w jakich pewne elementy przestają być czytelne i trzeba zmienić
> ich układ. Zamiast pikseli możesz granice określać po prostu w em, wtedy
> zależą od wielkości tekstu, co wydaje się najsensowniejszym podejściem.
W zasadzie racja. Mam nadzieję, że em nie będą zafałszowane na jakiś
urządzeniach mobilnych tak jak z pikselami ma to miejsce, które mają się
nijak do rzeczywistości. Przebadam to ale optymistą nie jestem.
> Frameworki najczęściej zakładają trzy zakresy - do 768px (telefon), do
> 1024px (tablet) i powyżej (desktop). Nie zawsze odpowiada to prawdzie, ale
> wystarcza. Tu chodzi o czytelnosć, a nie dostosowanie do konkretnego
> urządzenia.
I najciekawsze jest to, że tylko dla desktopu piksele są prawdziwe,
zgodne z wielkością okna przeglądarki a w pozostałych przypadkach -
losowe - być może w pewnym zakresie tylko. Zapewne webmasterzy już
wypraktykowali te zakresy pikseli podawanych przez mobilne więc chyba to
w miarę dobre kryteria.
--
Pozdrawiam,
Marek
-
9. Data: 2016-05-19 17:48:54
Temat: Re: Wykrywanie urządzeń w RWD. Ile cali ma cal?
Od: Borys Pogoreło <b...@p...edu.leszno>
Dnia Thu, 19 May 2016 11:58:58 +0200, Marek napisał(a):
> Wiesz, pal sześć dokładność co do piksela. Nie w tym rzecz. Urządzenie,
> które ma 1440px w poziomie w prortrait jest raportowane jako 419px
> (Nexus 6). Nie da się wyliczyć rozdzielczości urządzenia w DPI choćby z
> tego względu. Wydaje mi się, że DPI jest najlepszą jednostką do
> określania jak duże litery na danym urządzeniu powinno się wyświetlać.
> Zupełnie nie rozumiem czemu zafałszowano tą informację w urządzeniach
> mimo istnienia parametru resolution w media query.
Bo jakbyś poza wielkością ekranów jeszcze musiał walczyć z różnymi
rozdzielczościami, to już nikt by się w tym nie odnalazł. Dlatego wymyślono
rozdzielczość logiczną w CSS, żeby to jakoś ujednolicić.
> I najciekawsze jest to, że tylko dla desktopu piksele są prawdziwe,
> zgodne z wielkością okna przeglądarki a w pozostałych przypadkach -
> losowe - być może w pewnym zakresie tylko.
A masz włączone skalowanie DPI w systemie?
--
Borys Pogoreło
borys(#)leszno,edu,pl
-
10. Data: 2016-05-20 10:33:24
Temat: Re: Wykrywanie urządzeń w RWD. Ile cali ma cal?
Od: Marek <p...@s...com>
W dniu 19.05.2016 o 17:48, Borys Pogoreło pisze:
> Bo jakbyś poza wielkością ekranów jeszcze musiał walczyć z różnymi
> rozdzielczościami, to już nikt by się w tym nie odnalazł. Dlatego wymyślono
> rozdzielczość logiczną w CSS, żeby to jakoś ujednolicić.
Hmmm... niekoniecznie tak. Jeśli miałbym podane dpi ekranu to
jednoznacznie wiedziałbym, że aby czcionka była czytelna, to musi mieć X
pikseli. Np. przy ekranie 96 dpi czcionka 12px będzie wyglądała tak samo
jak na urządzeniu mobilnym o 180 dpi przy 24px. Przelicznik jest
banalnie prosty. Nie muszę dbać o fizyczne rozmiary urządzenia.
Oczywiście zakładam, że nie powstaną jakieś absurdalne wyświetlacze o
szerokości piksela, gdzie niczego nie wyświetlisz.
Ponadto to ujednolicenie jest dość słabe kiedy niemalże ta sama
rozdzielczość dpi na iPhonie to 320px a na jakimś Androidzie 419px.
Po trzecie, wprowadzono do media queries parametr resolution, który
poprzez to ujednolicenie storpedowano.
> A masz włączone skalowanie DPI w systemie?
Ja nie o tym mówię. W desktopach rozmiar pixelowy przeglądarki jest 1:1
przekazywany. Zarówno CSS jak i JS "wiedzą" ile dokładnie mamy px.
Możemy zatem budować media w oparciu o zakresy pixelowe bardzo
precyzyjnie. W mobilnych px nie jest px lecz abstrakcyjną jednostką, w
dodatku różną w różnych urządzeniach. No i o tym mówię.
A co do Twojej intencji w/w pytania (zapewne miałeś na myśli poprawne
wyświetlanie wymiarów calowych): akurat ja nie muszę gdyż mój monitor ma
dokładnie 96dpi. A czy to nie działa w drugą stronę? Driver monitora
przekazuje systemowi rozdzielczość w px i dpi, driver karty ustawioną
rozdzielczość px i na tej podstawie wyliczana jest fizyczna
rozdzielczość dpi dostarczana do przeglądarek? Nie sprawdzałem ale test
jest ciekawy. Zweryfikuję.
--
Pozdrawiam,
Marek
do góry
Rusza budowa osiedla Craft Zabłocie w Krakowie
