[rukh]

Uważam że responsywne strony powinny mieć dodatkowe właściwości CSS podane w blokach DPI/dppx, nie tylko PX podawane w Media Query MAX-WIDTH().

Np. powinno tak wyglądać:

Dla 125% w Windows:

@media screen and (min-resolution: 1.25dppx) { ... }

Dla 150% w Windows:

@media screen and (min-resolution: 1.5dppx) { ... }

Chodzi o to, by wtedy wczytywało obrazy wyższej rozdzielczości.
Ja np. w swoim ekranie 4K mam skalowanie 150%. Avatary na Wykopie są rozmazane. Logo Wykop jest rozmazane.

Np. zamiast bawić się w różne rozdzielczości Loga dla każdego skalowania, np. dla telefonów, gdzie wszystko jest najczęściej 3-krotnie powiększone (dla telefonów z FullHD i wyższe proporcje),
najprościej wkleić grafikę Wektorową SVG.

A nasze avatary w wersji mobilnej powinny być większe niż te 150x150.

Jeśli coś wyświetlimy jako:
{ width: 150px; height: 150px; } i do tego obrazek 150x150, to na takich telefonach z 3dppx się rozciągnie do 450x450, i będzie bardzo rozmazane.
Github wymaga Avatary 500x500. Ale i to już nie jest wystarczające dla obecnych telefonów :)
Pisząc strony, należy brać dzisiaj pod uwagę skalowania ekranów. Ekrany FullHD 22" ze skalowaniem 100% to nie jedyne ekrany dzisiaj. Są tablety, smartfony, wyświetlacze wyższej rozdzielczości - wszystko to z wyższym skalowaniem.

Przyjęło się że 1000px przy 100% i około 28 cm to 1000px, a przy większym zagęszczeniu pikseli w monitorach 1000px != 1000px.
Oprogramowania Windows (.., Linux, itd.) rozpoznają, które elementy UI powinny być skalowane (np. menu aplikacji), a które nie (np. obszar roboczy).
Nawet przy pisaniu stron powinniśmy brać takie rzeczy pod uwagę.
Jestem ciekaw czy w Bootstrap 5 pracują nad tematem.

Na razie przeglądarki, jeśli otworzy grafikę (JPG, PNG, ..) w nowej karcie, nie przestrzegają tej zasady - grafika wyświetla się rozmazana, zamiast ignorować skalowanie systemu. Firefox na dodatek resetuje skalowanie gdy kliknie się w zdjęcie, a je wcześniej przestawiliśmy.

#css #chrome #firefox #html #webdev #bootstrap #responsivedesign