Principala problemă legată de modificarea ferestrei de vizualizare HTML la dimensiunea smartphone-ului este că poate face ca site-ul web să nu mai răspundă sau să se afișeze incorect. Acest lucru se datorează faptului că atunci când se modifică fereastra de vizualizare, este posibil ca site-ul web să nu fie optimizat pentru o dimensiune mai mică a ecranului și să nu poată reduce în mod corespunzător conținutul. În plus, este posibil ca unele funcții să nu funcționeze corect pe un ecran de dimensiune mai mică, cum ar fi meniurile de navigare sau elementele interactive.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. Această linie de cod este o metaetichetă, care oferă browserului informații despre documentul HTML.
2. Atributul nume este setat la „viewport”, ceea ce spune browserului că această etichetă conține informații despre modul în care pagina ar trebui să fie afișată pe diferite dispozitive.
3. Atributul de conținut este setat la „width=device-width, initial-scale=1.0”, ceea ce îi spune browserului că ar trebui să folosească lățimea dispozitivului ca lățime a paginii și să o scaleze în sus sau în jos de acolo, dacă este necesar.
Design web responsiv
Designul web responsiv este o abordare a designului web care face ca paginile web să fie afișate bine pe o varietate de dispozitive și dimensiuni de fereastră sau ecran. Utilizează o combinație de grile și machete flexibile, imagini și o utilizare inteligentă a interogărilor media CSS. Site-urile web responsive sunt concepute pentru a oferi o experiență de vizualizare optimă — citire și navigare ușoară cu un minim de redimensionare, deplasare și derulare — pe o gamă largă de dispozitive (de la monitoarele computerelor desktop la telefoanele mobile).
În HTML, designul responsive poate fi realizat folosind următoarele tehnici:
• Grile flexibile – Utilizarea unităților relative, cum ar fi procentele sau ems în loc de unități cu lățime fixă, cum ar fi pixelii, pentru elementele de aspect, permite ca pagina să se adapteze flexibil la diferite dimensiuni de ecran.
• Interogări media – Interogările media CSS3 permit dezvoltatorilor să specifice stiluri diferite pentru diferite lățimi ale dispozitivului. Acest lucru permite ca aspectul paginii să se ajusteze corespunzător, în funcție de dispozitivul utilizat.
• Imagini receptive – Imaginile pot fi făcute receptive utilizând atributul srcset din HTML5, care permite dezvoltatorilor să specifice mai multe versiuni ale unei imagini la rezoluții diferite pentru diferite dispozitive.
• Videoclipuri flexibile – Videoclipurile pot fi, de asemenea, adaptate utilizând proprietatea de potrivire a obiectelor din CSS, care permite dezvoltatorilor să specifice modul în care videoclipurile ar trebui să se extindă în containerele lor, în funcție de dimensiunea lor.
Metaetichetă Viewport
Metaeticheta de vizualizare este un element HTML care spune browserului cum să ajusteze dimensiunile și scalarea paginii pentru a se potrivi dispozitivului utilizat. Este folosit pentru a controla modul în care arată o pagină web pe diferite dispozitive, cum ar fi smartphone-uri și tablete. Metaeticheta de vizualizare poate fi utilizată pentru a seta lățimea unei pagini web, pentru a o mări sau în jos și pentru a specifica dacă utilizatorii au sau nu permisiunea de a mări sau micșora. Poate fi folosit și pentru a seta scala inițială, scara maximă, proprietăți scalabile de utilizator și multe altele.
Cum pot face site-ul meu să se potrivească cu ecranul telefonului meu
Pentru a face ca un site web să se potrivească cu un ecran de telefon în HTML, puteți utiliza metaeticheta viewport. Această etichetă vă permite să controlați modul în care site-ul dvs. este afișat pe diferite dispozitive. Puteți seta lățimea ferestrei de vizualizare să fie egală cu lățimea dispozitivului, astfel încât site-ul dvs. web să își ajusteze automat dimensiunea pentru a se potrivi cu ecranul oricărui dispozitiv. În plus, puteți folosi interogări media în codul dvs. CSS pentru a personaliza în continuare modul în care arată site-ul dvs. pe diferite dispozitive.
