∞ Nowy iPad powoduje, że internet staje się brzydki
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:
- CSS3: What is the best method for adding 2x images to webpages that will be displayed on the new iPad with Retina graphics?
- WebKit Limit On Retina JPG Image Display
Wojtek Pietrusiewicz
Wydawca, fotograf, podróżnik, podcaster – niekoniecznie w tej kolejności. Lubię espresso, mechaniczne zegarki, mechaniczne klawiatury i zwinne samochody.