Noul iPad a fost lansat luna trecuta si, printre altele, are un incredibil Display Retina cu o rezolutie de 2048 la 1536 pixeli. Destul de mult, de îndată ce a fost anunțat, accentul sa îndreptat asupra dezvoltatorilor de aplicații native și a muncii lor de a scala aplicații până la rezoluția mai mare.
Acesta a fost, probabil, un accent greșit. Relativ puțin a fost gândit în ceea ce privește web-ul și cum ar arăta acest lucru pe noul Display Retina în perioada până la anunț. Ne-a lăsat un internet de text incredibil de clare, dar imagini ridicol și teribil, de calitate scăzută. Este timpul să vă optimizați, așa că în acest tutorial vom strategiza modul în care puteți proiecta cu afișarea retinei în minte.
Acest lucru este, probabil, destul de evident, dar poate fi încă trecut cu vederea de unii. Cu progrese semnificative în CSS, utilizarea imaginilor în structura unui site poate fi destul de minimă sau chiar inexistentă. Acest lucru oferă acestor site-uri un avantaj imens când vine vorba de compatibilitatea cu Retina Display, deoarece textul și grafica generată de CSS se va mări fără a se reduce în calitate. Din același motiv, textul pare cu mult mai bun pe ecranul retinei.
Un site pe care lucram nu avea nevoie de o singură actualizare a temei pentru a arăta grozav pe ecranul retinei; lipsa imaginilor însemna că nu era nimic de actualizat. Desigur, nu fiecare site va fi total sans imaginile, dar minimizarea utilizării lor va reduce efortul necesar pentru a optimiza afișajul retinei.
În general, există un pas spre această tactică: minimizarea utilizării imaginii acolo unde nu este cu adevărat necesară.
Firește, site-ul Apple este optimizat pentru a arăta incredibil de ascuțit și clare pe ecranul Retina. În zilele anterioare anunțului iPad-ului, Apple a început să-și actualizeze propriul site web pentru a oferi imagini receptive; elemente care s-au schimbat în funcție de faptul că navigați pe un iPad nou sau nu.
Metoda Apple este simplă în principiu. Site-ul se încarcă normal, dar apoi utilizează JavaScript pentru a înlocui imaginile relevante dacă navigați pe un iPad nou. Dacă vizitați un iPad nou, veți obține imaginile optimizate, în timp ce orice alt browser va schimba setările implicite.
Un astfel de exemplu este textul eroului Apple pe pagina de produs a iPad-ului, folosind codul următor în fișierul propriu-zis.
Pentru simplitate, nu voi împărtăși script-ul propriu-zis, dar în esență, mai întâi verifică dacă browser-ul este pe un dispozitiv cu un Retina Display, apoi verifică existența unei imagini de 2x (vom ajunge la asta într-un minut) și, dacă ambele condiții anterioare sunt adevărate, afișează imaginea de 2x.
Convenția cu sufixul 2x înseamnă "omologul" Retina "pentru fișier image.png
va fi image_2x.png
. Acest lucru vine de la iOS, care afișează automat un @ 2x
imagine într-o aplicație nativă atunci când aceasta există. Din păcate, noi, web designerii, nu obținem luxul de căutare și afișare automată, așa că trebuie să vină cu metode de emulare care, cu propriile noastre script-uri și interogări.
Acest lucru vine la un preț cu toate acestea. Utilizând această metodă, utilizatorul final se încarcă ambii imaginile non-Retina și Retina, ceea ce înseamnă că pagina se termină cu o dimensiune crescută a fișierului. Nu numai că scripting-ul Apple înseamnă că mai multe cereri sunt trimise la și de la browser, rezultând un timp suplimentar de încărcare a paginii. Desigur, dacă veți continua să minimizați utilizarea imaginii, această problemă va fi de asemenea redusă.
În timp ce Apple utilizează JavaScript, o metodă oarecum eficientă, există o alternativă; utilizând interogările media CSS pentru a servi condiția de styling la densitatea pixelilor dispozitivului.
Înainte de a ajunge la asta, este important să rețineți că, în cele din urmă, ecranul iPad-ului este încă de 1024x768 px în "pixeli CSS". Îi voi permite lui Dave Hyatt să explice.
Majoritatea autorilor site-ului web au crezut în mod tradițional că un pixel CSS este un pixel al dispozitivului. Cu toate acestea, pe măsură ce intrăm în această nouă lume înaltă DPI unde întregul interfață utilizator poate fi mărit, un pixel CSS poate ajunge pe ecran la mai mulți pixeli. De exemplu, dacă am setat o mărire a zoom-ului de 2x, atunci un pixel CSS ar fi reprezentat de un pixel de dispozitiv de 2 × 2.
Prin urmare, metoda pe care o folosim nu va viza iPad pe baza rezoluției sale, deoarece pur și simplu nu ar funcționa. Pentru toate intențiile și scopurile, rezoluția iPad-ului este încă de 1024x768 px în funcție de browser, iar direcționarea acestei rezoluții ar viza și generațiile anterioare ale iPad-ului. De asemenea, direcționarea rezoluției de 2048x1536 px cu interogări media nu ar avea niciun efect asupra noului iPad.
În schimb, putem viza folosind min-device-pixel-ratio
interogare. Această interogare indică browserului să încarce un anumit stil bazat pe raportul pixelilor dispozitivului la "pixelii CSS" menționați anterior. În cazul iPad-ului echipat cu afișaj Retina, acesta este de două (1024: 2048 și 768: 1536 simplificat până la 1: 2).
Prin urmare, putem încărca o foaie de stil "retină" pe baza raportului pixelilor dispozitivului.
Evident, folosim prefixul WebKit deoarece browser-ul iPad-ului este Safari, un browser WebKit, dar și pentru că interogarea media pare a fi disponibilă doar prin WebKit. Deoarece cascada stilurilor (după cum vă va spune numele "CSS"), prin simpla ordonare corectă a etichetei de mai sus, regulile din foaia de stil vor suprascrie cele pentru dispozitivele obișnuite specificate anterior.
Dacă nu vreți să puneți totul într-o întreagă foaie de stil separată, puteți utiliza interogările media inline pentru a specifica porțiuni din foaia dvs. de stil pentru dispozitivele echipate numai cu Retina, cum ar fi:
@media (-webkit-min-device-pixel-ratio: 2) #element fundal-imagine ('image-2x.png');
Notă: În timp ce utilizați schema de denumire "2x" este o modalitate utilă de organizare a imaginilor, nu vă simțiți obligați să faceți acest lucru. Puteți să vă numiți imaginile indiferent de ce doriți și, spre deosebire de aplicațiile native, acestea nu trebuie să fie chiar la distanțe similare.
Desigur, utilizarea acestei interogări media nu este în nici un fel specifică pentru iPad. De fapt, aceeași logică va fi declanșată atunci când navigați pe site-ul dvs. pe orice dispozitiv cu densitate pixelică similară, care utilizează același raport de pixeli de la CSS la dispozitiv, inclusiv iPhone 4 și iPhone 4S. Dacă doriți să vizați doar iPad-ul, puteți combina pur și simplu interogarea raportului pixel cu o lățime unu, pentru a specifica numai dispozitive echipate cu afișaj Retina din rezoluția de raportare a iPad-ului.
Nu este un caz în care site-ul dvs. arata bine fara optimizare, dar arata mai bine cu. Trebuie doar să vizitați un site bogat în imagini, dar ne-optimizat, pentru a înțelege cât de teribil sunt imaginile non-Retina pe noul iPad. Și, în cele din urmă, trebuie să fii martor la rezultate. Dacă nu aveți acces la un nou iPad, vă recomandăm să călătoriți într-un magazin Apple pentru a arunca o privire.
În timp ce Apple a vândut milioane de unități, în marele sistem de browsere, este încă o mică îngrijorare. Cu toate acestea, cu potențial echipat cu Retina Display MacBook la orizontul din această vară, punerea în practică acum ar putea într-adevăr să se mai achite mai târziu.