Nowy ekran w iPadzie o rozdzielczości 2048×1536 ma jeden ogromny mankament – powoduje, że wiele stron internetowych staje się po prostu brzydka ze względu na zastosowaną grafikę. Jest na to jednak w miarę proste rozwiązanie, chociaż tymczasowe.
@media
W przypadku Makowego ABC, nie chcąc obciążać limitu transferu osób wchodzących na stronę mobilnie, podniosłem rozdzielczość samego logo za pomocą następującego kodu w CSS:
@media only screen and (-webkit-device-pixel-ratio: 2)
{
.custom #header { background-image: url(http://link_do_logo_w_hi_res.png); }
}
Oryginalne logo ma rozdzielczość pionową 115px. Najpierw wrzuciłem drugą wersję z czterokrotnie wyższą liczbą pikseli (230px w pionie), ale nadal nie było za ładnie, więc zdecydowałem się na 460px.
Porównanie (100% cropy)
Oryginalne logo na iPadzie 3 na lekkim zbliżeniu:
Logo 2x na iPadzie 3 na lekkim zbliżeniu:
Logo 4x na iPadzie 3 na lekkim zbliżeniu:
Uff – teraz jest znacznie lepiej. Jak już wspominałem, nie będę na dzień dzisiejszy zmieniał innych grafik czy zdjęć ze względu na fakt, że wiele osób wchodzi na stronę z urządzeń mobilnych, co spowodowałoby znaczące zwiększenie transferu, szczególnie w przypadku zdjęć.
Więcej informacji na ten temat znajdziecie pod następującymi linkami:
Chcesz zwrócić mi na coś uwagę lub skomentować? Zapraszam na @morid1n lub na forum.