Jak radzisz sobie z powiększeniem przeglądarki klienta?

Mam dużo zdjęć na stronie, w galerii. Chcę, aby obrazy były ostre, więc nie wykonuję żadnego skalowania przeglądarki, używam oryginalnych wymiarów obrazu.

Działa to jednak tylko wtedy, gdy poziom powiększenia przeglądarki wynosi 100%. Gdy zwiększam lub zmniejszam poziom powiększenia, jakość zdjęć spada.

Niektórzy klienci faktycznie mają różne poziomy powiększenia domyślnie. Zastanawiałem się, jak sobie z tym poradzić i czy w ogóle sobie z tym poradzimy?

Twoje zdrowie

Myślę, że w większości innych odpowiedzi nie ma sensu: nie chodzi o przesłonięcie preferencji użytkownika, chodzi o dawanie najlepszej jakości obrazów we wspólnym scenariuszu, w którym urządzenie użytkownika przypisuje więcej niż jeden fizyczny piksel dla każdego piksela CSS, czyli piksela referencyjnego ”na obrazie, co powoduje powiększenie obrazu w przeglądarce, dzięki czemu jest on pikselowany i ziarnisty.

Moje sugerowane rozwiązania poniżej, ale najpierw tutaj są cztery sposoby, które mogą się zdarzyć:

• Najrzadziej: użytkownik wybiera powiększenie . Nie taki duży problem, ponieważ to ich wybór.
• Zaskakująco często: przeglądarka użytkownika jest domyślnie powiększona . Na przykład, wiele maszyn Windows o wysokiej gęstości pikseli jest domyślnie powiększonych do 125% lub więcej, a Firefox ostatnio (myląco!) To zrobił, więc w takich przypadkach informuje użytkowników, że są powiększeni do 100%, gdy faktycznie są powiększeni do 125% , drapiąc się po głowach, zastanawiając się, dlaczego wszystko nagle wygląda na ziarniste.
• Bardzo często: większość urządzeń Android (? I inne urządzenia) mają stosunek pikseli większy niż 1. Oznacza to, że każdy „pixel CSS” faktycznie pobiera wyświetlane przy użyciu więcej niż jednego fizycznego pixel - tak o 200px przez 200px obrazu ustawiony na width: 200px; height: 200px;będzie faktycznie skala obraz o wymiarach 200 na 200 pikseli na ponad 200 x 200 pikseli, co potencjalnie sprawia, że ​​jest ziarnisty.
• Bardzo często: wiele nowoczesnych urządzeń Apple ma „ wyświetlacze siatkówki ”. Jest to zasadniczo to samo co urządzenie z Androidem o współczynniku pikseli 2, ale z lepszym marketingiem i kilkoma niestandardowymi właściwościami, które pozwalają na wykrycie go z nazwy.

Każde z nich spowoduje problem Johna z galerią zdjęć, które wyglądają na zaskakująco ziarniste.

Miałem nadzieję, że ktoś będzie miał świetne rozwiązanie tego problemu, ale na razie oto moje preferowane opcje, zaczynając od najbardziej skutecznych, ale najmniej powszechnie możliwych:

1. Jeśli to możliwe, przejdź do vector - SVG (lub Raphael.js, jeśli nadal potrzebujesz obsługi IE8). Realistycznie jest to tylko opcja dla ikon, diagramów itp. I nigdy nie jest to opcja dla zdjęć. Bardzo złożone pliki SVG mogą być również niezgrabne na słabszych telefonach komórkowych ze względu na wymagane przetwarzanie.
2. Jeśli to możliwe, wykryj współczynnik pikseli urządzenia i na tej podstawie wyświetlaj obrazy. Może to również rozwiązać problem z Firefoksem w systemie Windows, ponieważ Firefox w systemie Windows zmienia odczyt współczynników pikseli podczas powiększania i pomniejszania. Minusem jest to, że staje się trudnym problemem kodowania obejmującym prace programistyczne po stronie serwera i klienta.

3. Jeśli 1. i 2. nie są możliwe, ale jest to naprawdę ważne, a jakość obrazu jest ważniejsza niż, powiedzmy, czas ładowania, wystarczy podwoić obraz.

   • Oto, co Google robi ze swoim logo na swojej stronie głównej: zgniatają obraz PNG o wymiarach 538px x 190px w pojemniku o wymiarach 269px x 95px. Jest to mniej więcej to samo, jak działa responsywny obraz.

   • Kiedyś uważano to za złą praktykę, ponieważ stare wersje IE były okropne w zmniejszaniu obrazów, ale obecnie są one bardzo rzadko używane i znacznie rzadziej niż ekrany o wysokiej gęstości pikseli. Nadal jest to trochę niepożądane, ponieważ zwiększy rozmiar obrazu, a tym samym wydłuży czas ładowania - jest to kompromis, który należy oceniać indywidualnie dla każdego przypadku.

   • Podwojenie rozmiaru jest powszechne, ponieważ bardzo niewiele urządzeń ma współczynnik większy niż 2, bardzo niewielu użytkowników jest powiększonych o więcej niż 200%, a skalowanie obrazów o 50% jest czystsze niż w innych ilościach.
4. Jeśli 1, 2 nie są możliwe, a czas ładowania jest zbyt wysoki dla 3, nie znam żadnych innych opcji, a moim zaleceniem jest, aby się tym nie przejmować, ponieważ połowa witryn w Internecie ma ten sam problem , a osoby z tym problemem w Twojej witrynie będą miały ten problem również w innych witrynach. Do diabła, Firefox na Windows nawet pikseluje własne przyciski interfejsu użytkownika ...

Jak zauważył DA01 , nie powinieneś nic z tym robić.

Zoom jest opcją określoną przez użytkownika i dlatego jest pod ich kontrolą. Ustawienia, z którymi decydują się zadzierać, nie powinny być twoją odpowiedzialnością.

Możesz uwzględnić różne przeglądarki i wersje, a co nie, ale rozsądnie mówiąc, nie powinieneś brać pod uwagę powiększenia użytkownika.

Pewnie możesz mieć 125% lub 150% (i może nawet nie będziesz musiał). Ale 200%, 300%, więcej? To po prostu nie ma sensu.

Co się stanie, jeśli użytkownik użyje motywu okna o wysokim kontraście? Co jeśli ciągle korzystają z lupy? Kogo to obchodzi?

Idealnie jest, jeśli twoja strona internetowa jest wystarczająco elastyczna, aby nie różniła się tak naprawdę od niewielkiej różnicy powiększenia, ale jakość zdjęć będzie się zmniejszać wraz z powiększeniem, ale to nie jest twoja odpowiedzialność.

To oczywiście tylko moja opinia, ale firma, dla której pracuję, wyraźnie mówi klientom, że nie obsługujemy ich preferencji dotyczących powiększania.

Inni ludzie udzielili świetnych wskazówek na temat problemów, które napotkasz i nie jestem wystarczająco dobry w tej dziedzinie, aby zrobić dobry samouczek, ale ...

Możesz zaprojektować responsywną stronę, która dostosowuje się odpowiednio do rozdzielczości / urządzenia użytkownika, a następnie prawdopodobnie szukasz kodu, który przełącza obrazy na pliki o wyższej lub niższej rozdzielczości na żądanie, zamiast rozciągania i ściskania posiadanych obrazów.

Kiedy próbowałem to zrobić po raz ostatni, użyłem media-query.js i picturefill.js. Zobacz: http://responsivedesign.is/resources/images/picture-fill . Miałem układ 3 kolumn, w którym niektóre obrazy obejmowałyby dwie kolumny ... Gdy okno przeglądarki było wystarczająco małe, duże obrazy przełączałyby się na mniejszą wersję res, która miałaby szerokość tylko jednej kolumny. Przeglądarka użytkownika po prostu załaduje potrzebną wersję pliku. (w moim przypadku wtyczka do muru przeniosła wszystko, aby pomieścić).

Oczywiście wtedy twój użytkownik musi mieć włączony javascript ...

Nie możesz wymusić ręki użytkownika. Do ustawień użytkownika nie należy grać. Ustawienia i obchodzenie ich jest złym pomysłem. Może istnieć powód, dla którego użytkownik coś zrobił. W obu przypadkach nie można zagwarantować niczego na różnych urządzeniach.

W rzeczywistości, jeśli przejdziesz do strony technicznej, stanie się to jeszcze bardziej interesujące. Naprawdę dajesz klucze do królestwa swoją stroną internetową. Zobacz, jak użytkownik pobiera stronę internetową, a użytkownik może teraz robić, co chce. Nie masz kontroli nad tą warstwą, jest ona przecież uruchomiona na komputerze użytkownika i mogą robić, co chcą. Nawet stackexhange nie wygląda tak samo na moim komputerze / telefonie komórkowym, jak na twoim. Automatycznie zmieniam niektóre aspekty GUI, aby naprawić 2 błędy renderowania i dodałem 2 skróty.

Irytujące zachowanie powiększania obrazów na ekranach HiDPI, które prowadzi do rozmytych zdjęć (czyli koszmaru fotografów), również niepokoi mnie od dłuższego czasu. Zastanawiałem się również, czy nie ma prostego atrybutu CSS, który mógłby go wyłączyć dla obrazów.

Moje obecne rozwiązanie z CSS wygląda następująco:

@media only screen and (min--moz-device-pixel-ratio: 1.25),
    (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-device-pixel-ratio: 1.25) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.25 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.5 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.75),
    (-o-min-device-pixel-ratio: 7/4),
    (-webkit-min-device-pixel-ratio: 1.75),
    (min-device-pixel-ratio: 1.75) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.75 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 2.00),
    (-o-min-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2.00),
    (min-device-pixel-ratio: 2.00) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 2.00 - var(--pic-width) + var(--pic-width));
        }
}

Następnym krokiem byłoby użycie klas do zdefiniowania i ustawienia różnych rozmiarów obrazu, jeśli to konieczne. Nie wiem, jak dynamicznie uzyskać rozmiary obrazów. Wydaje się, że funkcja CSS attr () nie działa w tym przypadku.

To byłoby bardziej pytanie programistyczne. Ale używając JQuery, a nawet po prostu płaskiego css, możesz wyświetlać różne obrazy w oparciu o szerokość ekranu użytkownika, wysokość ekranu i tak dalej.

Znowu jednak to prawdopodobnie nie jest wymiana stosu, o którą należy zapytać.

Możesz to zrobić po prostu przez HTML w nagłówku strony, dodaj to

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Nie jest to zalecane przez programistów do każdego typu witryny, ale powinno spełnić to, o co pytasz.

Mam nadzieję, że to pomaga: transformacja reguły css: skalowanie na znaczniku treści lub innej - nie idealnie, patrz tutaj, proszę:

/programming/23099849/stop-firefox-dpi-scaling-when-windows-setting-is-at-125/42755741#42755741