Care este imaginea curentă?
Portul de vizualizare este zona vizibilă a utilizatorului a unei pagini web.
Portul de vizualizare variază în funcție de dispozitiv, și va fi mai mic de pe un telefon mobil decât pe un ecran de computer.
Înainte de tablete și telefoane mobile, pagini web au fost proiectate numai pentru ecrane de calculator, și era un lucru obișnuit pentru paginile web pentru a avea un design static și o dimensiune fixă.
Apoi, când am început navigarea pe internet folosind tablete și telefoane mobile, pagini web dimensiuni fixe, erau prea mari pentru a se potrivi imaginii curente. Pentru a remedia acest lucru, browsere de pe acele dispozitive scalate în jos întreaga pagină web pentru a se potrivi pe ecran.
Acest lucru nu a fost perfect !! Dar o rezolvare rapidă.
Setarea imaginii curente
HTML5 a introdus o metodă pentru a permite web designeri preia controlul asupra imaginii curente, prin <meta> tag - ul.
Ar trebui să includă următoarele <meta> elementul viewport în toate paginile web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
O <meta> element de portul de vizualizare dă instrucțiunile browser - ului cu privire la modul de a controla dimensiunile și scalarea paginii.
width=device-width părții stabilește lățimea paginii pentru a urmări ecran lățimea dispozitivului (which will vary depending on the device) în (which will vary depending on the device) .
initial-scale=1.0 la initial-scale=1.0 parte stabilește nivelul inițial de zoom atunci când pagina este mai întâi încărcat de către browser.
Aici este un exemplu al unei pagini web , fără tag - ul meta viewport, și aceeași pagină web cu tag - ul meta viewport:
Sfat: Dacă navigați această pagină cu un telefon sau o tabletă, puteți face clic pe cele două link - uri pentru a vedea diferența.
Dimensiune Conținut pentru imaginea curentă
Utilizatorii sunt utilizate pentru a derula site-uri pe verticală, atât pe computere desktop și dispozitive mobile - dar nu și pe orizontală!
Deci, în cazul în care utilizatorul este obligat să deruleze pe orizontală, sau micșora, pentru a vedea întreaga pagină web are ca rezultat o experiență slabă a utilizatorului.
Unele reguli suplimentare de urmat:
1. Nu folosiți elemente de mari dimensiuni cu lățime fixă - De exemplu, în cazul în care o imagine este afișată la o lățime mai mare decât portul de vizualizare poate provoca portul de vizualizare pentru a derula orizontal. Amintiți-vă pentru a ajusta acest conținut pentru a se încadra în lățimea ferestrei de vizualizare.
2. Nu lăsați conținutul se bazează pe o anumită lățime pentru a face bine viewport - Deoarece dimensiunile ecranului și lățimea în pixeli CSS variază foarte mult între dispozitive, conținut nu trebuie să se bazeze pe o anumită lățime port de vizualizare pentru a face bine.
3. Utilizarea CSS interogări media pentru a aplica diferite stilizare pentru ecrane mici si mari - Stabilirea mari lățimi CSS absolute pentru elementele de pagină, va face ca elementul să fie prea mare pentru portul de vizualizare pe un dispozitiv mai mic. În schimb, folosind valori relative ale lățimii, cum ar fi lățimea: 100%. De asemenea, să fie atent de a folosi mari valori absolute de poziționare. Aceasta poate determina elementul să cadă în afara portului de vizualizare pe dispozitive mici.