Dnia Sat, 28 May 2016 13:31:58 +0200, Marek napisał(a):

> Zrobiłbym tak (opisowo):
>
> if media resolution<100dpi
> font-size: 12px
>
> else if media resolution<200dpi
> font-size: 24px
>
> else
> font-size: 36px

I wymyśliłeś media queries, tylko trudniejsze w obsłudze :)

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

do góry

W dniu 03.06.2016 o 11:27, Borys Pogoreło pisze:
>
> I wymyśliłeś media queries, tylko trudniejsze w obsłudze :)
>

Serio? Czemu tak uważasz? Zresztą nie ja to wymyśliłem lecz resolution
jest parametrem media queries. Wydaje mi się dużo prostsze panowanie nad
wielkością tekstu (w szczególności) gdy znamy DPI urządzenia. Operowanie
szerokościami pikselowymi wydaje mi się abstrakcyjne bo po pierwsze sam
zauważyłeś, że piksel w ujęciu CSS jest jednostką wyssaną z palca i
zależy od widzimisię producenta danego urządzenia.

Po drugie - te jednostki nie mają sensu bo nie wiemy czy na ekranie o
szerokości 1000px czcionka 12px będzie mikroskopijna, czy też wielkości
konia bo to zależy jak duży jest piksel na danym urządzeniu. Natomiast
przy DPI wartości są jednoznaczne.

--
Pozdrawiam,
Marek

do góry

Dnia Fri, 3 Jun 2016 22:30:41 +0200, Marek napisał(a):

>> I wymyśliłeś media queries, tylko trudniejsze w obsłudze :)
>
> Serio? Czemu tak uważasz?

Bo musiałbyś pisać reguły dla *wszystkich* elementów dla *każdej* możliwej
gęstości ekranu. Albo wszystko by się rozjeżdżało.

Tekst to dopiero początek problemów przy takim podejściu.

> Po drugie - te jednostki nie mają sensu bo nie wiemy czy na ekranie o
> szerokości 1000px czcionka 12px będzie mikroskopijna, czy też wielkości
> konia bo to zależy jak duży jest piksel na danym urządzeniu. Natomiast
> przy DPI wartości są jednoznaczne.

Będzie "mała, ale jeszcze czytelna" - to najzupełniej wystarczy.

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

do góry

W dniu 04.06.2016 o 15:42, Borys Pogoreło pisze:


>
> Bo musiałbyś pisać reguły dla *wszystkich* elementów dla *każdej* możliwej
> gęstości ekranu. Albo wszystko by się rozjeżdżało.

No ale dokładnie to samo dzieje się definiując gradację pikselową
przecież :-) Też definiujesz przedziały i określasz odrębny CSS dla
nich. Jedyna różnica polega na tym, że robisz to chybił trafił w
pikselach bo nie wiesz co oznacza np. 1000px - czy tablet, czy telefon
czy jeszcze coś innego.

Przykład z życia wzięty: wspomniałeś o typowych 3 podziałach, cytuję:

"do 768px (telefon), do 1024px (tablet) i powyżej (desktop)"

Z ciekawości sprawdziłem to na moim telefonie (Nexus 6). Na 768 nie
zareagował. Gdy podałem wyssane z palca 1000px - wtedy detekcja
przeszła. Na drugim telefonie Nexusie 5x - podobnie. Na podobnych
wymiarów wiekowym HTC Desire HD zadziałało już przy 768. Tak więc
widzisz - podziały pikselowe ... jak to ktoś powiedział ... istnieją
tylko teoretycznie. :-)

Przy DPI kryteria byłyby dużo bardziej jednoznaczne a ilość podziałów
byłaby dokładnie taka sama jak przy nie jednoznacznych pikselach. Jedyna
różnica byłaby w precyzji detekcji wyłącznie.

> Tekst to dopiero początek problemów przy takim podejściu.

Wydaje mi się, że problem byłby identyczny gdyż mówimy jedynie o
skuteczniejszej detekcji wielkości ekranów. Jeśli zrobisz to trafniej,
to nie rzutuje to przecież na zmianę ilości problemów. No chyba, że
widzisz to inaczej. Chętnie poczytam :-)

> Będzie "mała, ale jeszcze czytelna" - to najzupełniej wystarczy.

To też zależy od urządzenia. Najświeższy Android pięknie skaluje teksty,
czy też raczej sekcje stron WWW. Strony nie-RWD z dowolną czcionką są
doskonale widoczne. Mało tego (tak na marginesie), wkurza mnie gdy
content strony jest RWD (np. Allegro, mBank etc) bo wtedy interfejs
staje się ortopedyczny. Wszystko duże i kwadratowe jak dla niewidomych i
zajmujące czasem N ekranów w dół a i często jest okrojona funkcjonalność
przy okazji. Nie ma żadnego problemu z oglądaniem zwykłych "startych"
stron WWW. Dwukrotne kliknięcie powiększa do danej kolumny jeśli jest
nieczytelna. Ponowne - przywraca view. Wszystko łatwe, intuicyjne i
przyjemne. Jednakże ten podział na tablety i inne jest znakiem czasów i
trzeba się dostosować... ehhh

--
Pozdrawiam,
Marek

do góry

Dnia Sat, 4 Jun 2016 18:20:09 +0200, Marek napisał(a):

>> Bo musiałbyś pisać reguły dla *wszystkich* elementów dla *każdej* możliwej
>> gęstości ekranu. Albo wszystko by się rozjeżdżało.
>
> No ale dokładnie to samo dzieje się definiując gradację pikselową
> przecież :-) Też definiujesz przedziały i określasz odrębny CSS dla
> nich.

Nie, definiujesz element raz, a później ew. wyjątki. Przy kombinacjach z
DPI musiałbyś pisać wprost reguły dla każdego możliwego ekranu i jeszcze
przewidzieć w przód dalsze zwiększanie gęstości.

> Z ciekawości sprawdziłem to na moim telefonie (Nexus 6). Na 768 nie
> zareagował. Gdy podałem wyssane z palca 1000px - wtedy detekcja
> przeszła.

A to dziwne, bo podobno ma 412px w poziomie.

> Na drugim telefonie Nexusie 5x - podobnie. Na podobnych
> wymiarów wiekowym HTC Desire HD zadziałało już przy 768. Tak więc
> widzisz - podziały pikselowe ... jak to ktoś powiedział ... istnieją
> tylko teoretycznie. :-)

Oczywiście, ale to najlepsze co mamy. Taki sam problem jest z wykryciem,
czy użytkownik korzysta z dotyku czy z myszy (a może z obu?).

> Przy DPI kryteria byłyby dużo bardziej jednoznaczne a ilość podziałów
> byłaby dokładnie taka sama jak przy nie jednoznacznych pikselach. Jedyna
> różnica byłaby w precyzji detekcji wyłącznie.

A jak byś rozwiązał kwestię dostosowania interfejsu do sposobu korzystania
z urządzenia? Wysokie dpi równie dobrze może oznaczać ekran typu Retina w
17-calowej makówce.

> To też zależy od urządzenia. Najświeższy Android pięknie skaluje teksty,
> czy też raczej sekcje stron WWW. Strony nie-RWD z dowolną czcionką są
> doskonale widoczne. Mało tego (tak na marginesie), wkurza mnie gdy
> content strony jest RWD (np. Allegro, mBank etc) bo wtedy interfejs
> staje się ortopedyczny. Wszystko duże i kwadratowe jak dla niewidomych i
> zajmujące czasem N ekranów w dół a i często jest okrojona funkcjonalność
> przy okazji. Nie ma żadnego problemu z oglądaniem zwykłych "startych"
> stron WWW. Dwukrotne kliknięcie powiększa do danej kolumny jeśli jest
> nieczytelna. Ponowne - przywraca view. Wszystko łatwe, intuicyjne i
> przyjemne.

Chyba mamy inną definicję "łatwego" i "intuicyjnego", jeśli trzeba
powiększać fragmenty, by korzystać ze strony. Z dobrze zrobionej [1]
"ortopedycznej" strony korzysta się bez problemów.

[1] Okrojona funkcjonalność to nie jest dobrze zrobiona strona (choć i od
tego są wyjątki)

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

do góry

W dniu 04.06.2016 o 22:31, Borys Pogoreło pisze:

>> No ale dokładnie to samo dzieje się definiując gradację pikselową
>> przecież :-) Też definiujesz przedziały i określasz odrębny CSS dla
>> nich.
>
> Nie, definiujesz element raz, a później ew. wyjątki. Przy kombinacjach z
> DPI musiałbyś pisać wprost reguły dla każdego możliwego ekranu i jeszcze
> przewidzieć w przód dalsze zwiększanie gęstości.

Szczerze mówiąc nie łapię nadal dlaczego tak uważasz. Załóżmy
hipotetycznie, że 768 px odpowiada 200 dpi. Jeśli określisz zmianę CSS
przy 768 px lub przy 200 dpi skutek będzie identyczny przecież.

>> Z ciekawości sprawdziłem to na moim telefonie (Nexus 6). Na 768 nie
>> zareagował. Gdy podałem wyssane z palca 1000px - wtedy detekcja
>> przeszła.
>
> A to dziwne, bo podobno ma 412px w poziomie.

Tak, właśnie to sam wcześniej sprawdziłem. JavaScripr zwraca mi
szerokość ekranu (w trybie portrait) jako właśnie 412px a media
min/max-width ma się nijak do tego. Stąd m.in. moje dywagacje.

>> Na drugim telefonie Nexusie 5x - podobnie. Na podobnych
>> wymiarów wiekowym HTC Desire HD zadziałało już przy 768. Tak więc
>> widzisz - podziały pikselowe ... jak to ktoś powiedział ... istnieją
>> tylko teoretycznie. :-)
>
> Oczywiście, ale to najlepsze co mamy. Taki sam problem jest z wykryciem,
> czy użytkownik korzysta z dotyku czy z myszy (a może z obu?).

Zgodzę się z Tobą, że musimy pracować na tym co mamy. Ale rozważając już
czysto akademicko zupełnie nie rozumiem tego zamieszania. DPI jest
jednoznaczne a piksele CSS są z dupy wzięte (powołując się na w/w
przykład). Nie sprawdza się tu w ogóle zasada CSS, że piksele są
pikselami kątowymi. Bez żadnego kombinowania dpi byłoby jednoznaczne.
Więcej o moich przemyśleniach poniżej, gdzie przedstawiam własną wizję :-)

>> Przy DPI kryteria byłyby dużo bardziej jednoznaczne a ilość podziałów
>> byłaby dokładnie taka sama jak przy nie jednoznacznych pikselach. Jedyna
>> różnica byłaby w precyzji detekcji wyłącznie.
>
> A jak byś rozwiązał kwestię dostosowania interfejsu do sposobu
korzystania
> z urządzenia? Wysokie dpi równie dobrze może oznaczać ekran typu Retina w
> 17-calowej makówce.

Tak, zastanawiałem się nad tym. W końcu N dpi na billboardzie
elektronicznym (który swoją drogą ma być zakazany przy ulicach - nie
wiem czy słyszałeś o tym) powinno uwzględniać odległość oglądania.
Dlatego wprowadziłbym fizyczne i wizualne DPI. Fizyczne, to jednostka
nie wymagająca komentarza. Wizualne - to DPI po uwzględnieniu pixel
ratio zależne od założonej odległości oglądania i rozdzielczości i
wielkości ekranu. W zależności od tego jaka intencję ma autor treści
strony WWW, takie przełączniki CSS uwzględnia. Jeśli zależy mu aby cal
wynosił 2.54cm na ekranie, to stosuje fizyczne DPI. Jeśli zwisa mu to i
np. obrazowo chce przedstawić kwadrat o boku 1 cala tak aby z odległości
"ulicznej" ktoś zobaczył tą figurę w sensie zobrazowania a nie używania
jako jednostki miary - wybiera DPI relatywne dla urządzenia (wizualne)
jako przełącznik CSS. Wydaje mi się to najbardziej banalnym podejściem,
bez kombinowania co autor przeglądarki WWW (i to dla danego urządzenia)
miał na myśli.

> Chyba mamy inną definicję "łatwego" i "intuicyjnego", jeśli trzeba
> powiększać fragmenty, by korzystać ze strony. Z dobrze zrobionej [1]
> "ortopedycznej" strony korzysta się bez problemów.

Tak, to prawda. Intuicyjność zależna jest od użytkownika i może
wywoływać skrajnie różne odczucia. No ale tu ciężko o kompromis. Ja
trafiając na jakąś stronę WWW, która ma przycisk "przełącz do wersji
klasycznej", natychmiast go używam. Dużo lepiej czyta mi się zawartość
widząc całość powiększając i wycofując się z powiększenia szybkim gestem
z fragmentu strony niż przewijając w nieskończoność w dół ortopedyczną
stronę, nie wiedząc co mnie spotka po kolejnym przewinięciu.
Podświadomie oczekuję uporządkowanego przekazu zamiast stochastycznego.
Wspomniałem o tym jedynie w ramach ciekawostki, bo raczej tu niczego
konstruktywnego nie )

--
Pozdrawiam,
Marek

do góry

Dnia Sun, 5 Jun 2016 23:39:06 +0200, Marek napisał(a):

> > Nie, definiujesz element raz, a później ew. wyjątki. Przy kombinacjach z
> > DPI musiałbyś pisać wprost reguły dla każdego możliwego ekranu i jeszcze
> > przewidzieć w przód dalsze zwiększanie gęstości.
>
> Szczerze mówiąc nie łapię nadal dlaczego tak uważasz. Załóżmy
> hipotetycznie, że 768 px odpowiada 200 dpi. Jeśli określisz zmianę CSS
> przy 768 px lub przy 200 dpi skutek będzie identyczny przecież.

Pewnego dnia przyjdą ekrany 400dpi i nagle strona będzie dwa razy za mała.
Będziesz za każdym razem poprawiać CSS-y? O piksele "logiczne" martwi się
producent telefonu lub przeglądarki.

> > A to dziwne, bo podobno ma 412px w poziomie.
>
> Tak, właśnie to sam wcześniej sprawdziłem. JavaScripr zwraca mi
> szerokość ekranu (w trybie portrait) jako właśnie 412px a media
> min/max-width ma się nijak do tego. Stąd m.in. moje dywagacje.

Na to pewnie jest proste wytłumaczenie o nazwie "Android" ;)

(nie pierwszy i nie ostatni problem)

> Zgodzę się z Tobą, że musimy pracować na tym co mamy. Ale rozważając już
> czysto akademicko zupełnie nie rozumiem tego zamieszania. DPI jest
> jednoznaczne a piksele CSS są z dupy wzięte (powołując się na w/w
> przykład). Nie sprawdza się tu w ogóle zasada CSS, że piksele są
> pikselami kątowymi.

Nie będą co do ułamka sekundy kątowej, ale widać w miarę wyraźnie stosunek
rozdzielczości "logicznej" do wielkości ekranu (+/- wyjątki jakichś
kreatywnych producentów).

> Tak, zastanawiałem się nad tym. W końcu N dpi na billboardzie
> elektronicznym (który swoją drogą ma być zakazany przy ulicach - nie
> wiem czy słyszałeś o tym)

I bardzo dobrze, nienawidzę ich. Jedziesz sobie w nocy, a tu nagle
dostajesz lampą po oczach.

> Dlatego wprowadziłbym fizyczne i wizualne DPI.

Widzę, że Firefox ma coś takiego jak "mozmm", które miało być "fizycznym
milimetrem" o którym piszesz, ale jak widać nie ma na to zapotrzebowania i
temat jest śladowo opisany.

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

do góry

W dniu 07.06.2016 o 22:11, Borys Pogoreło pisze:

> Pewnego dnia przyjdą ekrany 400dpi i nagle strona będzie dwa razy za mała.

No ale dokładnie ten sam problem istnieje przy definiowaniu pikselowych
podziałów. Na monitorach 4k będziesz miał 2048px, 4096px itd. Wszystko
zależy od tego co przeglądarka zaanonsuje. Czytaj poniżej.

> Będziesz za każdym razem poprawiać CSS-y? O piksele "logiczne" martwi się
> producent telefonu lub przeglądarki.

Właśnie... a jak odkryłem, u mnie anonsuje brednie i jest czym się
martwić na Nexusie 6. I znów czytaj dalej zanim skomentujesz :-)

>> > A to dziwne, bo podobno ma 412px w poziomie.
>>
>> Tak, właśnie to sam wcześniej sprawdziłem. JavaScripr zwraca mi
>> szerokość ekranu (w trybie portrait) jako właśnie 412px a media
>> min/max-width ma się nijak do tego. Stąd m.in. moje dywagacje.
>
> Na to pewnie jest proste wytłumaczenie o nazwie "Android" ;)

No więc właśnie. Takich wytłumaczeń pewnie znajdzie się od zarypania. I
co wtedy? To są przecież realne sytuacje. Będziesz generował oddzielne
CSSy dla każdego "wytłumaczenia"? Dlatego optuję za DPI bo to jest
jednoznaczne. Jeśli np. skończyłem z CSS dla 200 dpi a powstanie 400dpi
to wielka krzywda się nie stanie bo telefon (Android) zręcznie skalować
potrafi. Ewentualnie zyskam nowe zlecenie na dodanie kolejnego CSS. :-)

Tu miejsce na Twój komentarz :-D

> Nie będą co do ułamka sekundy kątowej, ale widać w miarę wyraźnie stosunek
> rozdzielczości "logicznej" do wielkości ekranu (+/- wyjątki jakichś
> kreatywnych producentów).

Powtórzę swoje uparcie :-D Na Nexusie 6 mogę zignorować wersje RWD i
zawsze wygląda strona dobrze i czytelnie. Dlatego miotam się pomiedzy
stosowaniem RWD, które zależne jest od tego co w dłoni trzymam i wybór
CSS dla danego urządzenia jest taki jak producent telefonu sobie
wymyślił (czyli przypadkowy).

>> Tak, zastanawiałem się nad tym. W końcu N dpi na billboardzie
>> elektronicznym (który swoją drogą ma być zakazany przy ulicach - nie
>> wiem czy słyszałeś o tym)
>
> I bardzo dobrze, nienawidzę ich. Jedziesz sobie w nocy, a tu nagle
> dostajesz lampą po oczach.

Witaj w klubie :-) Zapewne w końcu ktoś nie uległ "lobby" wreszcie.

> Widzę, że Firefox ma coś takiego jak "mozmm", które miało być "fizycznym
> milimetrem" o którym piszesz, ale jak widać nie ma na to zapotrzebowania i
> temat jest śladowo opisany.

W zasadzie nie chodzi o mm tylko o DPI. Mając mm byłoby trzeba sztuczki
w JS wymyślać aby przeliczyć to na DPI. Jednakże nie trzeba kombinować
lecz wykorzystać to co już istnieje:

https://developer.mozilla.org/en-US/docs/Web/CSS/Med
ia_Queries/Using_media_queries#resolution

A nie działa ogólnie rzecz ujmując...


--
Pozdrawiam,
Marek

do góry

Dnia Tue, 7 Jun 2016 22:38:35 +0200, Marek napisał(a):

>> Pewnego dnia przyjdą ekrany 400dpi i nagle strona będzie dwa razy za mała.
>
> No ale dokładnie ten sam problem istnieje przy definiowaniu pikselowych
> podziałów. Na monitorach 4k będziesz miał 2048px, 4096px itd. Wszystko
> zależy od tego co przeglądarka zaanonsuje. Czytaj poniżej.

Szerokość strony ma pewne granice rozsądku, nie ma sensu robić szerszej
treści, niż 1200-1400px, bo nikt tego nie obejmie wzrokiem.

DPI ma granicę jedynie w kreatywności producentów w gonitwie na cyferki.

> Właśnie... a jak odkryłem, u mnie anonsuje brednie i jest czym się
> No więc właśnie. Takich wytłumaczeń pewnie znajdzie się od zarypania. I
> co wtedy? To są przecież realne sytuacje. Będziesz generował oddzielne
> CSSy dla każdego "wytłumaczenia"?

Nie, media queries są wystarczająco skuteczne, by objąć większość urządzeń.
Jeśli producent Nexusa ma jakieś swoje pomysły, to trudno.

Nawiasem mówiąc nie wierzę, że tak znana marka ma tak podstawowy problem.
Jaki napis tu widzisz na tym telefonie:
http://foundation.zurb.com/sites/docs/interchange.ht
ml ?

> Dlatego optuję za DPI bo to jest
> jednoznaczne. Jeśli np. skończyłem z CSS dla 200 dpi a powstanie 400dpi
> to wielka krzywda się nie stanie bo telefon (Android) zręcznie skalować
> potrafi. Ewentualnie zyskam nowe zlecenie na dodanie kolejnego CSS. :-)

Uhm. I będziesz poprawiać wszystkie strony, które zrobiłeś do tej pory, z
tego część charytatywnie?

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

do góry

Użytkownik "Borys Pogoreło" <b...@p...edu.leszno> napisał w wiadomości
news:lf95o0drqcoo.1rn58essa89ei.dlg@40tude.net...
> Dnia Sun, 5 Jun 2016 23:39:06 +0200, Marek napisał(a):
>

> Pewnego dnia przyjdą ekrany 400dpi i nagle [...]

:)
One juz dawno przyszły.
I poszły jeszcze dalej.

do góry