Web Design Responsiv - Viewport. Ce este Viewport? Setarea Viewport. Element viewport meta. Mărimea conținutului Viewport-ului. Câteva reguli suplimentare de urmat.

Susține Lectii-Virtuale!

Responsive Web Design - Viewport

Ce este Viewport?

Viewport este zona vizibilă a utilizatorului unei pagini web.

Viewportul variază în funcție de dispozitiv și va fi mai mic pe un telefon mobil decât pe un ecran al computerului.

Înainte de tablete și telefoane mobile, paginile web erau concepute doar pentru ecranele computerului și era comun ca paginile web să aibă un design static și o dimensiune fixă.

Apoi, când am început să navigăm pe internet folosind tablete și telefoane mobile, paginile web cu dimensiuni fixe erau prea mari pentru a se potrivi cu ecranul. Pentru a remedia acest lucru, browserele de pe aceste dispozitive au redus întreaga pagină web pentru a se potrivi ecranului.

Nu a fost perfect !! Dar o rezolvare rapidă.

Setarea Viewport

HTML5 a introdus o metodă pentru a permite proiectanților web să preia controlul asupra viewport-ului, prin intermediul etichetei <meta>.

Ar trebui să includeți următorul element viewport <meta> în toate paginile dvs. web:



Un element viewport <meta> oferă instrucțiuni browserului cu privire la modul de control al dimensiunilor și scalării paginii.

width=device-width part stabilește lățimea paginii pentru a urma lățimea ecranului dispozitivului (screen-width) (care va varia în funcție de dispozitiv).

initial-scale=1.0 setează nivelul inițial de zoom atunci când pagina este încărcată prima dată de browser.

Iată un exemplu de pagină web fără viewport meta tag și aceeași pagină web cu viewport meta tag:


Mărimea conținutului Viewport-ului (Size Content to The Viewport)

Utilizatorii sunt folosiți pentru a derula site-urile pe verticală atât pe desktop cât și pe dispozitive mobile - dar nu pe orizontală!

Așadar, dacă utilizatorul este obligat să defileze orizontal sau să mărească, pentru a vedea întreaga pagină web, rezultă o experiență slabă a utilizatorului.

Câteva reguli suplimentare de urmat:

1. NU folosiți elemente cu lățime fixă ​​mare - De exemplu, dacă o imagine este afișată la o lățime mai largă decât cea din portofoliu, aceasta poate determina derularea portofoliului pe orizontală. Nu uitați să ajustați acest conținut pentru a se încadra în lățimea vizualizării.

2. NU lăsați conținutul să se bazeze pe o anumită lățime a viewportului (viewport width) pentru a fi redat - Deoarece dimensiunile ecranului și lățimea în pixeli CSS variază foarte mult între dispozitive, conținutul nu ar trebui să se bazeze pe o anumită lățime a viewportului pentru a fi redat.

3. Utilizați interogări CSS media (media queries) pentru a aplica stiluri diferite pentru ecrane mici și mari - Setarea lățimilor CSS mari pentru elementele paginii va face ca elementul să fie prea larg pentru viewport de pe un dispozitiv mai mic. În schimb, luați în considerare utilizarea unor valori de lățime relative, cum ar fi lățimea: 100%. De asemenea, aveți grijă să folosiți valori mari de poziționare absolută. Poate determina elementul să iasă în afara ecranului pe dispozitive mici.