După apariția de dispozitive cu ecrane de înaltă rezoluție, de exemplu, iPhone, iPad, Samsung Galaxy Note II și, desigur, MacBook Pro cu ecran Retina, în fața dezvoltatorilor web și bloggeri, pur și simplu a ridicat problema mapării normale a site-urilor lor pe aceste dispozitive. Mai jos vă voi arăta cum am adăugat suport pentru afișare cu rezoluție înaltă pe site-urile lor.
Retina Display cu rezoluție înaltă
În primul rând, trebuie să clarificăm ceea ce display cu rezoluție înaltă (Retina - este numele de marketing pentru ecrane de înaltă rezoluție utilizate în tehnologia Apple). In display-uri convenționale, cum ar fi laptop cu o diagonală de 15 inci, rezoluția ecranului este 1440 × 900. Aceasta înseamnă - monitorizarea matricei este format din pixeli (puncte) în lungime și această matrice are 1440 pixeli și 900 pixeli în înălțime.
Este simplu, dar odată cu apariția de display-uri hi-res totul a devenit un pic mai complicat. Pentru ochiul uman nu a văzut pixelii, iar imaginea este în revista sau de pe această fotografie, este afișată, în care, pentru aceleași 15 inch de rezoluția ecranului fizic este 2880 × 1800 pixeli. Exact de două ori mai mult decât un monitor convențional. La afișarea grafică vectorială. de exemplu, elemente de interfață, fonturi, rame, realizate cu CSS pe paginile web, totul arată frumos și bine, dar atunci când afișarea grafică raster. adică imagini, nu toate atât de lin.
Problema cu afișarea graficii raster
Pe display-uri convenționale o imagine de 300 până la 200 de puncte și, de asemenea, afișate pe ecran - 300 × 200, desigur, în cazul în care aceasta nu scară. Pe-hi res matricele de imagine 300-200 pot fi afișate în două moduri.
- Ca o imagine cu 600 × 400 pixeli, atunci se va ocupa pe ecran exact în același loc ca și în monitor convențional.
- Ca o imagine cu o rezoluție de 300 × 200, dar monitorul atunci va fi hi-res ocupă de două ori mai puțin spațiu decât convenționale. Asta este, va fi de două ori mai mică, pentru că display-uri hi-res, cu de două ori rezoluția, dimensiunea coincide cu ecranele uzuale.
Opțiunea implicită la afișarea pe site-uri este primul - toate imaginile sunt mărite de două ori. Care este motivul pentru care toate imaginile de pe site-ul fotografii, și mai ales iconițe și logo-uri - devin neclare, un exemplu pe care am citat la începutul acestui articol.
În scopul de a obține site-ul dvs. afișat perfect pe toate dispozitivele, inclusiv cu hi-res ecran, suficient pentru a stoca toate imaginile de două ori mai mare, iar în HTML indică dimensiunea reală de afișare:
sau CSS:
Acesta este cel mai simplu mod, dar are un dezavantaj - de două ori mai mari imagini vor fi oferite tuturor utilizatorilor, cu display-uri convenționale, inclusiv. Acestea vor fi afișate în mod normal, precum și imaginea de obicei, dar de trafic pentru a încărca aceste imagini au nevoie de două ori mai mult, că este rău pentru viteză și optimizare, deci este mai bine să nu facă acest lucru.
În WordPress, puteți face acest lucru în fișierul wp-content / teme / ta tema / footer.php.
Pentru a încărca imagini, potrivite pentru display-uri hi-res, care sunt definite prin CSS, sunt utilizate cererile mass-media:
Pentru cei care folosesc CSS preprocesor. hagfish poate fi util. pentru încă o dată pentru a nu copy-paste.