Până de curând, Apple a introdus în lume dispozitivele sale cu un display inovator Retina, iar dezvoltatorii web au avut deja probleme serioase. Faptul este că pagina aceluiași site poate arăta destul de diferit pe Retina și pe un ecran normal. Este vorba de imensul DPI al Retinei. Orice grafică începe să pară spălată, cu pixelizare explicită, deoarece 1 pixel al CSS devine egal cu un pătrat de 2 × 2 pe retină. Există metode de înlocuire a graficelor pe ecrane cu un astfel de raport pixel, dar acum nu despre asta.
Site-urile care sunt construite în avantajul CSS asupra graficii nu sunt atât de dureroase pentru a face acest tip de verificări, având în vedere acest lucru, merită să ne gândim înainte de a tăia png sau jpg de la layout.
Pregătirea uneltelor
Acum despre verificarea în sine. Dacă nu aveți un afișaj cu retină sau un prieten care are, acest tip de verificare va trebui făcut în mod artificial. Este foarte convenabil pentru a face acest lucru cu bookmarklet (pentru cei care nu știu ce este un bookmarklet este, este doar un șir de js-code pe care browser-ul va executa după cum doriți). Și pentru utilizatorii de browsere Chrome, puteți să faceți clic pe butonul plug-in.
3) Descărcați arhiva cu extensia browserului nostru și despachetați-o.
4) Acum, în browser navigați la Tools -> Extensions și bifați caseta de selectare Mod Developer (sus-sus)
5) După care faceți clic pe "Descărcați extensia despachetată ...", iar în caseta de dialog găsim arhiva neambalată.
Efectuat. Acum avem un buton pe panou.
Să începem să emită Retina
Pentru a încerca emulatorul, trebuie să mergeți la site-ul țintă și să faceți clic pe butonul plug-in. Dacă totul a fost făcut în mod corect, veți vedea o versiune mărită a site-ului. Acesta este modul în care site-ul și grafica dvs. vor arăta pe ecranul retinei.
