Strona zoptymalizowana pod różne rozdzielczości


(Lufcik) #1

Mam takie pytanie do doświadocznych webmasterów.
Chciałbym, aby moja strona była zoptymalizowana pod różne rozdzielczości.
I tutaj pojawia się problem z czcionką. Jakich jednostek użyć do jej definiowania w css?
Wykluczyłem px i postawiłem na jednostkę vh. Ale pojawia się problem z wyświetlaniem.
Stronę tworze na monitorze o rozdzielczości 1650x1050. Na laptopie o rozdzielczości 1388x768, czcionka jest sporo za mała i źle się czyta. Czemu tak się dzieje? Skoro załóżmy 2vh to 2% wysokości ekranu, to czcionka powinna być proporcjonalna do rozdzielczości. Inne elementy zdefiniowane w vh i vw są dobrze wyświetlane. Problem jest z czcionką. Będę wdzięczny za wskazówki.


(kowgli) #2

Poczytaj o tzw. “media queries” i “responsive web design”. Z drugiej strony na laptopie z ekranem 1388x768 wszystko źle wygląda, bo takich ekranów powinni zakazać ;). Użytkownik będzie przyzwyczajony.

Nigdy nie słyszałem, żeby skalować czcionkę w zależności od rozdzielczości. Chyba że robisz jakiś artystyczny pełnoekranowy dashboard i chcesz mieć stałe proporcje. Przecież w tym momencie rozmiar czcionki będzie ci się ciągle zmieniał jak tylko ktoś zmieni rozmiar okienka. Nigdy się z czymś takim nie spotkałem i byłoby to łagodnie mówiąc wkurzające.

Proponuję też zaopatrzyć się w jakieś normalniejsze monitory, bo to co podajesz to lata 2000’. Teraz ludzie mają ekrany 4k w 12’ laptopach.


(Fizyda) #3

To nie w tym leży problem autora.

Ja używam em bo da się je wyliczyć i ładnie wszystko przeskalować.

No właśnie wysokości - czyli ilości PX w pionie, czyli przy mniejszej rozdzielczości wyjdzie Ci mniej pikseli. Mylisz rozdzielczość matrycy z jej rozmiarem. Monitor masz duży przynajmniej 22 cale więc pojedynczy piksel też będzie większy niż w 15 calowej, małej matrycy laptopa. Poczytam czym jest dpi bo to będzie miało znaczenie.
Zresztą zrób sobie prosty łopatologiczny test. Postaw laptopa obok monitora na obu odpal html z kolorowym divem o stałych wymiarach powiedzmy 150px na 150px i zobaczysz że pomimo iż mają ten sam rozmiar na ekranie są różnej wielkości fizycznej ponieważ na dwóch matrycach masz różne zagęszczenie pikseli.


(kowgli) #4

Dlaczego? Może za pomocą media queries mieć różne wielkości czcionek, w zależności od zakresów rozdzielczości, chociaż sama w sobie ta koncepcja jest kiepska moim zdaniem.


(Fizyda) #5

I co mu to da? Skoro nie ma znaczenia rozdzielczość a dpi? Możesz mieć dwa różne monitory jeden 1920x1080 22 cale a drugi 3840x2160 44 cale. Ustawiając pod rozdzielczość rozmiar czegokolwiek na drugim monitorze fizycznie będzie to 2 razy większe, i nawet za duże dla czytającego - zakładając tą samą odległość.
Możemy do przykładu dodać trzecie urządzenie o rozdzielczości 1920x1080 i niech to będzie smartfon który jest bliżej niż oba monitory, a obiekt będzie za mały a czcionka zbyt mała do komfortowego czytania.

Dlatego nie projektuje się pod rozdzielczość, a pod DPI. Media queries nie jest złą koncepcją bo działa bardzo dobrze, ale trzeba rozumieć jak działa i jak jest implementowana. Nie wystarczy przeczytać artykułu “responsive web design” albo “skalowane strony internetowe” bo w 90% przypadków sami autorzy nie rozumieją mechanizmu media queries i tylko powielają głupoty, bez podania informacji dlaczego coś co jest wbrew logice działa. Lub co gorsza poruszą temat i wskoczą na jakiegoś bootstrapa.


(Lufcik) #6

Media w css jest faktycznie jakimś rozwiązaniem. Tylko uzależniać wielość czcionki od media screen czy od media resolution? Bo teraz tak: na telewizorze FHD o przekątnej 32 cale, strona się na przykład dobrze wyświetla i wszystko jest czytelne, a na oko, to taki telewizor ma sporo mniejsze dpi, niż mój 21 calowy monitor 1680x1050px. Z kolei na mojej starej lumii 720 o rozdzielczości 480x800 i 217dpi, tekst również jest czytelny bez stosowania jakiegokolwiek @media query.

I pytanie dodatkowe: czemu tylko jest problem z czcionką. Reszta - divy, bloki, grafika i inne, są zdefiniowane za pomocą % lub vh,vh i one są dobrze wyświetlane, bez względu na rozdzielczość. Wiadomo, czasem są mniejsze, czasem są większe w zależności od rozmiaru wyświetlacza, ale są proporcjonalne.
Zainteresowanym mogę udostępnić kod css lub zrobić screeny z różnych urządzeń.