Viewport (megjelenítési terület)

A viewport a látható megjelenítési terület a felhasználó eszközén, ami egy telefonon sokkal kisebb, mint egy monitoron. A viewport meta címke (a fejlécben) mondja meg a böngészőnek, hogyan igazítsa a tartalmat a képernyő szélességéhez.

Helyes viewport-beállítás nélkül a mobil böngésző a desktop-méretet zsugorítaná össze, apró, olvashatatlan szöveggel, oldalra görgetéssel. Mivel a Google mobile-first indexel, a reszponzív megjelenés alapfeltétele a megfelelő viewport meta. Ez a reszponzív dizájn egyik sarokköve.

A viewport meta tag a HTML head szekcióban helyezkedik el: `<meta name="viewport" content="width=device-width, initial-scale=1">`. Ez a két attribútum azt közli a böngészővel, hogy az oldal szélességét az eszköz képernyőszélességéhez igazítsa, és az alapértelmezett zoom szint 1:1 arányú legyen. Enélkül egy mobiltelefon az 1200 px szélességű desktop-layoutot 320 px-es képernyőn jelenítené meg, kb. 25%-os méretben — az összes szöveg olvashatatlan lenne, és az olvasónak vízszintesen kellene görgetni.

A Core Web Vitals metrikák közül a Cumulative Layout Shift (CLS) és a Largest Contentful Paint (LCP) közvetlen összefüggésben van a viewport beállítással: helytelen viewport esetén a tartalom betöltéskor „ugrál", ami magas CLS-értéket és rosszabb Page Experience jelet eredményez. A mobile-first indexelés 2026-ban már kizárólagos — a Google csak a mobil verziót indexeli elsőként. Ha a viewport hiányzik vagy hibás, az oldalsebesség (page speed) is szenvedhet, mivel a böngészőnek extra számítási munkát kell végeznie a layout-újraszámításhoz.

Egy győri kerékpárwebshop tulajdonosa észrevette, hogy a Google Search Console mobilteljesítmény-jelentése tele van „Nem reszponzív viewport" figyelmeztetéssel. A Lighthouse-audit 45/100 mobilpontszámot mutatott, és az oldalra látogatók 67%-a mobilról érkezett, de a konverziós arány mobilon csak 0,8% volt, desktoppal szemben 3,2%-hoz képest.

A fejlesztők ellenőrizték a HTML forrást, és kiderült, hogy a webshop WordPress-sablonján belül a viewport meta tag hiányzott egy örökölt egyedi fejlécből. A tag hozzáadása után a CLS-értéke 0,28-ról 0,04-re csökkent, az LCP 4,1 másodpercről 2,3 másodpercre javult, és a lazy loading is hatékonyabban működött. 8 héttel később a mobilos konverziós arány 1,9%-ra emelkedett — csupán egyetlen meta tag javításával.

A viewport fogalma szorosan összefügg a mobile-first indexeléssel: a Google csak mobilon ellenőrzi az oldalak tartalmát és teljesítményét, ezért a helyes viewport beállítás a mobilbarát megjelenés alapfeltétele.

A Core Web Vitals metrikák — különösen a CLS és az LCP — közvetlenül kapcsolódnak a viewport-beállításhoz, hiszen a helytelen megjelenés layout-váltásokat okoz, amelyek rontják a Page Experience jelet. Az oldalsebesség (page speed) is érintett: a böngészőnek pontosan kell tudnia, mekkora területre kell a layoutot számolni. A lazy loading technika hatékonysága is viewport-függő: a böngésző csak akkor tölti be a képet, ha az a viewport-ba kerül. A CDN (Content Delivery Network) gyorsítja a tartalom elérhetőségét, de az TTFB javulása csak akkor jelenik meg a valódi felhasználói élményben, ha a viewport helyes és a layout stabil.

• A viewport meta tag teljes hiánya: Különösen régebbi vagy egyedi fejléccel rendelkező sablonokban fordul elő; a Google Search Console „Nem reszponzív" hibáját jelzi, és a mobilos rangsorolást rontja.
• Rögzített pixel-szélesség megadása: Ha `content="width=480"` helyett nem `width=device-width` szerepel, az oldal csak 480 px-es képernyőn fog helyesen megjelenni — minden más eszközön hibás lesz a layout.
• user-scalable=no letiltása: Ez akadálymentességi problémát okoz, és egyes Google-irányelvek szerint hátrányosan érintheti a Page Experience értékelést, mivel megakadályozza a felhasználókat a zoom használatában.

A viewport a felhasználó eszközén látható megjelenítési terület. A `<meta name="viewport" content="width=device-width, initial-scale=1">` tag nélkül a mobilos megjelenés hibás: az oldalak zsugorítva, vízszintes görgetéssel jelennek meg. A Google mobile-first indexelése miatt ez az alapvető technikai SEO-elem elhagyhatatlan 2026-ban.