Viewport

Viewport, dimensiunea unei ferestre sau a unei zone vizibile pe ecran. O semnificație mai specifică a termenului se referă la un element meta din HTML5.

Viewport, dimensiunea unei ferestre sau a unei zone vizibile pe ecran

Termenul de viewport se referă la dimensiunea unei ferestre sau a unei zone vizibile pe un ecran.

În general, acest termen este utilizat pentru afișaje pe dispozitive mobile, cum ar fi smartphone-uri și tablete.

O semnificație mai specifică a termenului viewport se referă la un element meta din HTML 5.

Joacă un rol crucial în optimizare mobilă.

Elementul scalează conținut afișat astfel încât dimensiunea ecranului să poată fi utilizată eficient.

În acest caz, se asigură că tot conținutul e lizibil și afișat corect pe ecrane de dimensiuni diferite.

Elementul viewport adaptează paginile web la lungimea și lățimea ecranului.

Astfel, browserele mobile vor putea să afișeze corect întregul conținut permanent.

Informații generale

Datorită viewport-ului, website-urile de pe dispozitivele mobile nu sunt afișate în același mod ca pe desktop.

Utilizatorii nu trebuie să facă zoom, dar pot vedea conținutul într-un mod care să se potrivească afișajului mic.

Vizualizările ca meta elemente (în combinație cu web design receptiv) ajută browserele.

Acestea vor putea să despartă paginile și să le reasambleze pe ecrane mici.

În acest mod, utilizatorii vor putea să primească imagini semnificative și prin optimizare SEO.

Vizualizările au astfel sarcina de a preveni problemele de afișare.

Determinarea formatelor de ieșire adaptate dispozitivului mobil joacă un rol esențial în această situație.

Funcționalitatea viewport în codul HTML sau în fișierul CSS

Puteți integra viewport-ul în fișierele dvs. HTML în două moduri.

Fie direct în document, fie într-un fișier CSS prin care sintaxa acestor două alternative diferă foarte ușor.

Dacă doriți să includeți viewport-ul direct în fișierul HTML ca etichetă meta puteți utiliza următorul cod:

<meta name=viewport content="width=device-width, initial-scale=1">

În acest caz, lățimea este definită astfel încât să se adapteze la lățimea ecranului dispozitivului respectiv.

„Initial scale” înseamnă factorul de zoom inițial și că pagina va fi afișată 1:1 pe ecranul unui dispozitiv mobil.

Puteți utiliza viewport pentru a defini înălțimea și a configura un factor de zoom minim și/sau maxim.

Articole recomandate:

Eticheta meta poate împiedica utilizatorii să facă zoom (user-scalable=no). Este utilă în special pentru aplicații.

Dacă în schimb specificați viewport-ul într-un fișier CSS, ar trebui să-l puneți chiar la început.

În acest mod, vă puteți asigura o afișare corectă. Iată un exemplu despre cum ar putea arăta acel cod:

@viewport {
width: device-width;
}

Posibile dificultăți

Principala dificultate a viewport e că există un număr tot mai mare de dispozitive mobile cu dimensiuni diferite.

Cu toate acestea, pentru a obține un afișaj optim pe toate dispozitivele disponibile există soluții.

Sunt diverse instrumente și programe software care verifică afișarea corectă pe dispozitivele mobile standard.

Astfel de instrumente, de exemplu, sunt iOS MIH-Tool, Ghostlab și Adobe Edge Inspect.

Cel din urmă este disponibil și pentru Windows.

Pe lângă aceste instrumente de testare vă recomandăm să efectuați teste reale pe propriul smartphone.

O altă dificultate este densitatea pixelilor.

La urma urmei, nu dimensiunea afișajului, ci mai degrabă afișajul de pixeli e decisiv pentru afișare.

Deși pixelii sunt unități constante, dispozitivele mobile au adesea o densitate mai mare decât computerele vechi.

E important ca dezvoltatorii să ia în considerare cât conținut ar trebui să fie afișat și dacă scalarea are sens.

Relevanța practică a utilizării viewport

Vizualizările trebuie specificate fie în cod HTML, fie într-un fișier CSS pentru toate website-urile.

În acest mod, vă asigurați că pot fi afișate corespunzător pe dispozitivele mobile.

Mai ales în contextul unui web design receptiv, viewport este indispensabil.

A devenit standardul pentru optimizarea mobilă.

Toți operatorii de website-uri ar trebui să le ofere utilizatorilor navigarea plăcută pe care o merită.

Țineți cont de faptul că numărul utilizatorilor de telefonie mobilă este în continuă creștere.