Metatagul Viewport
În primul rând, să examinăm unul dintre aspectele cheie ale utilizării designului adaptiv - metatagul viewport (de fapt, designul adaptiv începe cu acest tag). Să avem la început următoarea pagină web:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pagină web obișnuită</title>
</head>
<body>
<h2>Pagină web obișnuită</h2>
</body>
</html>Aceasta este o pagină web standard, care într-un browser obișnuit va arăta în felul următor:
Cu toate acestea, dacă rulăm aceeași pagină web într-un emulator de dispozitiv mobil sau pe un dispozitiv mobil real, vom avea dificultăți în a citi ce este scris pe ea:
Prin aplicarea scalării, utilizatorul poate în cele din urmă vedea ce este scris acolo. Totuși, acest lucru nu este foarte convenabil. În același timp, pagina web are mult spațiu liber, ceea ce nu este foarte estetic.
De ce se întâmplă acest lucru? Problema este că fiecare browser mobil setează dimensiunile inițiale ale paginii și apoi încearcă să o adapteze la dimensiunile ecranului dispozitivului mobil curent.
Întreaga zonă vizibilă pe ecranul browserului este descrisă de conceptul de Viewport. Esențialmente, viewport reprezintă zona în care browserul web încearcă să "încorporeze" pagina web. De exemplu, browserul Safari pe iPhone și iPod setează implicit lățimea viewportului la 980 de pixeli.
Astfel, primind pagina și încadrând-o într-un viewport de 980 de pixeli lățime, browserul o comprimă la dimensiunile dispozitivului mobil. De exemplu, dacă lățimea ecranului smartphone-ului este de 320 de pixeli, atunci pagina va fi redusă la această dimensiune. Și un factor de scalare de 320/980 va fi aplicat tuturor elementelor paginii.
De ce se utilizează în acest caz exact 980 de pixeli și nu dimensiunea reală a ecranului? Motivul este că, în mod implicit, browserul presupune că fiecare pagină web este destinată desktopurilor. Și o lățime tipică pentru un site desktop poate fi considerată de 980 de pixeli.
În același timp, fiecare browser stabilește propria lățime a zonei viewport, care nu este neapărat de 980 de pixeli. Alte browsere pot suporta ca lățime inițială alte valori. Dar acestea vor efectua, de asemenea, scalare.
Pentru a evita un astfel de scenariu neplăcut, este recomandabil să folosim metatagul viewport. Acesta are următoarea definiție:
<meta name="viewport" content="parametri_metatag">În atributul content al metatagului putem defini următorii parametri:
Acum să modificăm exemplul anterior de pagină web, folosind metatagul:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Pagină web obișnuită</title>
</head>
<body>
<h2>Pagină web obișnuită</h2>
</body>
</html>
Pagina web arată cu siguranță mai bine datorită utilizării metatagului viewport. Utilizând parametrul width=device-width le spunem browserelor web să considere ca lățime inițială a zonei viewport nu 980 de pixeli sau un alt număr, ci lățimea reală a ecranului dispozitivului. Astfel, browserul web nu va efectua nicio scalare, deoarece lățimea viewportului și lățimea sunt aceleași.
Putem de asemenea să folosim și alți parametri, de exemplu, să interzicem utilizatorului să scaleze dimensiunile paginii:
<meta name="viewport" content="width=device-width, maxi