Eticheta meta viewport în CSS

Viewport-ul este zona vizibilă a unei pagini web pe care utilizatorul o poate vedea.

Dimensiunea viewport-ului depinde de dispozitiv. Va fi mult mai mică pe un telefon mobil decât pe un ecran de computer.

Ar trebui să adăugați următorul element <meta> în secțiunea <head> a tuturor paginilor dvs. web:

Acest lucru îi spune browserului cum să controleze dimensiunea și scalarea paginii.

Partea width=device-width setează lățimea paginii pentru a se potrivi cu lățimea ecranului dispozitivului, care variază în funcție de dispozitiv.

Partea initial-scale=1.0 setează nivelul inițial de zoom atunci când pagina se încarcă prima dată în browser.

Adăugați această etichetă <meta> în interiorul <head> al paginii dvs. HTML pentru a seta viewport-ul.

Utilizatorii sunt obișnuiți să deruleze paginile web în sus și în jos atât pe dispozitive desktop, cât și pe cele mobile, dar nu lateral.

Dacă un utilizator trebuie să deruleze orizontal sau să micșoreze pentru a vedea întreaga pagină, aceasta creează o experiență proastă.

Iată câteva reguli de urmat:

• Nu utilizați elemente mari cu lățime fixă. De exemplu, dacă o imagine este mai lată decât viewport-ul, aceasta va provoca derulare orizontală. Ajustați întotdeauna conținutul astfel încât să se încadreze în lățimea viewport-ului.
• Nu lăsați conținutul să depindă de o anumită lățime a viewport-ului pentru a arăta bine. Dimensiunile ecranelor variază mult între dispozitive, așa că conținutul dvs. ar trebui să funcționeze la orice lățime.
• Utilizați media query-uri CSS pentru a aplica stiluri diferite pentru ecrane mici și mari. Evitați setarea unor lățimi absolute mari pe elementele paginii. Utilizați în schimb valori relative precum width: 100%. De asemenea, fiți atenți cu valorile mari de poziționare absolută, deoarece acestea pot împinge elementele în afara viewport-ului pe ecrane mici.