W dniu 20.05.2016 o 18:36, Borys Pogoreło pisze:

> A teraz piszesz po prostu "12px" i wiesz +/- jakiej wielkości będzie
> czcionka, więc jaka to różnica? Reszta to zmartwienie przeglądarki.

Ok, nie będę więc wnikał :-) Wydaje mi się to wszystko przekombinowane,
niepotrzebnie utrudnione. Pomyślałem sobie, że gdybym znał dpi (zresztą
taki parametr w media query istnieje i robi za atrapę), to mógłbym
relatywnie dostosować wszystko co chcę. No ale cóż, mamy co mamy.


--
Pozdrawiam,
Marek

do góry

Dnia Mon, 23 May 2016 21:16:40 +0200, Marek napisał(a):

> Ok, nie będę więc wnikał :-) Wydaje mi się to wszystko przekombinowane,
> niepotrzebnie utrudnione. Pomyślałem sobie, że gdybym znał dpi (zresztą
> taki parametr w media query istnieje i robi za atrapę), to mógłbym
> relatywnie dostosować wszystko co chcę. No ale cóż, mamy co mamy.

No ok, to załóżmy, że masz "294 dpi" - co z tym zrobisz?

--
Borys Pogoreło
borys(#)leszno,edu,pl

do góry

W dniu 23.05.2016 o 23:41, Borys Pogoreło pisze:

>
> No ok, to załóżmy, że masz "294 dpi" - co z tym zrobisz?
>

Przepraszam za zwłokę. Byłem bardzo zajęty pracą.

Zrobiłbym tak (opisowo):

if media resolution<100dpi
font-size: 12px

else if media resolution<200dpi
font-size: 24px

else
font-size: 36px

To poglądowo, nie zastanawiałem się nad konkretnymi przedziałami
precyzyjnie. Generalnie chodzi o to, że wielkość czcionki na różnych
urządzeniach będzie podobna zgodnie ze skokiem rozdzielczości. Algorytm
banalny, nie dbamy czy to pion czy poziom. Podobnie można postąpić z
szerokością bloków na stronie.

--
Pozdrawiam,
Marek

do góry

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

do góry

W dniu 29.05.2016 o 19:57, NotBear pisze:


Hej

> O fizycznych jednostkach na ekranie lepiej zapomniec

Tak, koledzy już mi o tym powiedzieli.
Zupełnie nie rozumiem czemu wprowadzono cale do jednostek w CSS skoro
nie ma to żadnej wartości. :(

> 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.

Tak na marginesie - odległość od monitora nie ma tu zastosowania. Jeśli
96 pikseli zmierzone suwmiarką to 2.54cm, to znaczy, że wyświetlacz ma
96dpi. Jednostki dpi są bardzo precyzyjnie określone. Nie ma tu miejsca
na interpretacje, odległości od monitora itp.

> wystarczy operowac w media queries na przedzialach szerokosci
> zdefiniowanych w CSS pikselach lub jednostkach relatywnych.

Tak też zrobię. Pixel ratio wydaje mi się prowizorką. No ale cóż, skoro
inaczej nie można, to nie pozostaje mi nic innego jak dostosować się.
Dziękuję Ci za pomoc.

--
Pozdrawiam,
Marek

do góry

W dniu 2016-05-29 o 23:35, Marek pisze:
> Zupełnie nie rozumiem czemu wprowadzono cale do jednostek w CSS skoro
> nie ma to żadnej wartości. :(

Ma sens dla @media print


> Tak na marginesie - odległość od monitora nie ma tu zastosowania. [...]

Ma, gdyz piksel jest definiowany jako miara katowa: "The reference pixel
is the visual angle of one pixel on a device with a pixel density of
96dpi and a distance from the reader of an arm's length. For a nominal
arm's length of 28 inches, the visual angle is therefore about 0.0213
degrees. For reading at arm's length, 1px thus corresponds to about 0.26
mm (1/96 inch)."

https://www.w3.org/TR/css3-values/#absolute-lengths

Idea jest taka, zeby uwzglednic sposob uzytkowania ekranu. Element
dlugosci 100px wyswietlony na monitorze stojacym na biurku winien miec
wizualnie podobna wielkosc jak np na odleglym ekranie na scianie lub
smartfonie trzymanym blisko w reku (za to pomiar suwmiarka wykaze
znaczna rozbieznosc :-).


> Pixel ratio wydaje mi się prowizorką.

Bo to bardziej sie przydaje tworcom przegladarek, zeby poprawnie
zachowywaly sie na roznych gestosciach ekranow :-)

Tworcom stron glownie do optymalnego serwowania grafiki rastrowej.


--
NotBear

do góry

W dniu 30.05.2016 o 22:03, NotBear pisze:

> W dniu 2016-05-29 o 23:35, Marek pisze:
>> Zupełnie nie rozumiem czemu wprowadzono cale do jednostek w CSS skoro
>> nie ma to żadnej wartości. :(
>
> Ma sens dla @media print

Sprawdzałeś czy to tam działa? Być może też tam wymyślono, że cal ma 96
px lub coś podobnie absurdalnego.

Ponadto tak czy owak nie rozumiem dlaczego dla mediów ekranowych tak
samo to działać nie chce. DPI w obu tych przypadkach jest jednoznaczne.
Przekombinowane to wszystko... ehhh.

Właśnie czytając to, co poniżej napisałeś doszedłem do wniosku, że też
nie działa. Ale o tym poniżej.

> Ma, gdyz piksel jest definiowany jako miara katowa: "The reference pixel
> is the visual angle of one pixel on a device with a pixel density of
> 96dpi and a distance from the reader of an arm's length. For a nominal
> arm's length of 28 inches, the visual angle is therefore about 0.0213
> degrees. For reading at arm's length, 1px thus corresponds to about 0.26
> mm (1/96 inch)."
>
> https://www.w3.org/TR/css3-values/#absolute-lengths
>
> Idea jest taka, zeby uwzglednic sposob uzytkowania ekranu. Element
> dlugosci 100px wyswietlony na monitorze stojacym na biurku winien miec
> wizualnie podobna wielkosc jak np na odleglym ekranie na scianie lub
> smartfonie trzymanym blisko w reku (za to pomiar suwmiarka wykaze
> znaczna rozbieznosc :-).

Aaahaaa... załapałem w czym rzecz! Podejściem CSS jest wizualizacja a
nie trzymanie się jednostek fizycznych i stąd moje niezrozumienie
jednostek fizycznych w interpretacji CSS.

Przy okazji zwróć uwagę, że w tym artykule pokazane jest jak piksel
wyświetlacza zamieniany jest na szereg pikseli drukarki. Czyli DPI
również jest tu syntetyczne i kompletnie niczego nie oznacza.

> Bo to bardziej sie przydaje tworcom przegladarek, zeby poprawnie
> zachowywaly sie na roznych gestosciach ekranow :-)
>
> Tworcom stron glownie do optymalnego serwowania grafiki rastrowej.

Kumam :-)

--
Pozdrawiam,
Marek

do góry

----- Original Message -----
From: "Marek" <p...@s...com>
Newsgroups: pl.comp.www
Sent: Tuesday, May 31, 2016 11:07 AM
Subject: Re: Wykrywanie urządzeń w RWD. Ile cali ma cal?


>W dniu 30.05.2016 o 22:03, NotBear pisze:
>
>> W dniu 2016-05-29 o 23:35, Marek pisze:
>>> Zupełnie nie rozumiem czemu wprowadzono cale do jednostek w CSS skoro
>>> nie ma to żadnej wartości. :(
>>
>> Ma sens dla @media print
>
> Sprawdzałeś czy to tam działa? Być może też tam wymyślono, że cal ma 96 px
> lub coś podobnie absurdalnego.


Ja na wydrukach używam jednostkę "pt"
Jest to 1/72 cala.

do góry

W dniu 2016-05-31 o 11:07, Marek pisze:
> Sprawdzałeś czy to tam działa?

Masz mnie! :-)

Lata temu robilem CSSy do druku, ale przyznaje sie, ze nigdy nie
sprawdzalem co do milimetra tego co wyszlo.

Sprawdzilem teraz i z trojki: Chrome, Fx, IE11 tylko ten trzeci (sic!)
poprawnie wypuscil na drukarke element o wielkosci zadanej w calach. W
pozostalych dochodzi do skalowania w dol.

p {
border:1px solid black; display:block; width:2in; height:2in;
}


Po dodaniu regul jak nizej Chrome rowniez wydrukowal poprawne wymiary,
Firefoxa nie udalo sie zmusic do lepszej wspolpracy...

@page {
size: A4; margin: 0;
}
html, body {
width: 210mm; height: 297mm; margin: 0; padding: 0;
}


--
NotBear

do góry

W dniu 02.06.2016 o 20:57, NotBear pisze:
> W dniu 2016-05-31 o 11:07, Marek pisze:
>> Sprawdzałeś czy to tam działa?
>
> Masz mnie! :-)
>

Olać to :) Należy przyjąć, że CSS (w uproszczeniu) tak ma i nie
przejmować się tym. Tak, jak przytoczyłeś: piksele w CSS to zabawy z
kątami patrzenia itp. Krótko mówiąc wielkości fizyczne stają się wtedy
wielkościami uznaniowymi. Jak ja to kocham... No ale jest jak jest.

--
Pozdrawiam,
Marek

do góry