Viewport mobil 6 min de citit Actualizat în august 2026

Configurarea viewport-ului: pagini responsive fără bariere de accesibilitate

Elementul meta viewport spune browserelor mobile cum se raportează pixelii CSS la ecran. Fără o declarație potrivită, browserul poate randă un layout desktop lat și îl poate micșora; restricțiile de zoom pot crea apoi o barieră de accesibilitate.

Pe scurt

Folosește un viewport standard și permite zoom

Majoritatea paginilor responsive trebuie să declare width=device-width și initial-scale=1, apoi să se bazeze pe CSS flexibil. Evită maximum-scale, minimum-scale și user-scalable=no în paginile obișnuite.

  • Include un singur meta viewport valid în head.
  • Folosește layout responsive, nu un canvas desktop fix.
  • Nu dezactiva pinch zoom pentru conținut obișnuit.
  • Testează textul, controalele și overflow-ul la lățimi mici și zoom mare.
01

Ce schimbă declarația

O bază comună este meta name=viewport content="width=device-width, initial-scale=1". Aceasta aliniază viewport-ul de layout cu lățimea dispozitivului și permite media queries și componentelor flexibile să funcționeze corect.

Declarațiile duplicate sau valorile invalide pot produce comportamente diferite între browsere. Păstrează elementul în head și generează-l dintr-un singur layout comun.

<meta name="viewport" content="width=device-width, initial-scale=1">
02

Riscuri de accesibilitate dincolo de tag

  • Zoom restricționat Dezactivarea scalării poate împiedica persoanele cu vedere slabă să mărească textul.
  • Conținut cu lățime fixă Tabelele, media și containerele late produc scroll orizontal sau tăiere.
  • Controale mici Geometria responsive nu ajută dacă touch targets și spațierea sunt insuficiente.
  • Presupuneri de orientare Conținutul trebuie să rămână utilizabil în portrait și landscape.
03

Testează layout-ul, nu doar metadata

Folosește dispozitive reale și emulare la lățimi reprezentative. Mărește textul și pagina, deschide meniuri și dialoguri, focalizează formulare și verifică dacă elementele sticky ascund conținut.

Combină verificarea statică din raport cu Lighthouse Accessibility și testare manuală cu tastatură, screen reader și touch pentru fluxurile importante.

Listă de acțiuni

Validează o bază responsive utilizabilă

  1. 01Păstrează o singură declarație width=device-width, initial-scale=1.
  2. 02Elimină restricțiile inutile de zoom și orientare.
  3. 03Corectează containerele, media și tabelele cu lățime fixă.
  4. 04Testează la lățimi mici, zoom 200% și ambele orientări.
  5. 05Retestează formularele, navigarea și dialogurile pe dispozitive reale.

Referințe oficiale

Recomandările tehnice din acest ghid sunt aliniate cu următoarele surse primare.