# Viewport meta

> Azt nézzük, hogy az oldal fejében van-e viewport meta width=device-width értékkel; enélkül a telefon asztali szélességben rajzolja ki az oldalt.

A viewport meta címke megmondja a mobilböngészőnek, hogy az oldalt a készülék tényleges szélességén jelenítse meg. Ha hiányzik, a telefon úgy tesz, mintha asztali képernyő lenne, kirajzolja az oldalt, majd összekicsinyíti, hogy elférjen. A szöveg olvashatatlanul apró lesz, és a látogatónak nagyítania kell.

Ez SEO-kérdés is: a Google a mobilos változatot használja az indexeléshez és a rangsoroláshoz (mobile-first indexing), tehát a mobilon rosszul megjelenő oldal a találatokban is rosszabbul teljesít.

## Hogyan mérjük

A riport a nyitóoldal HTML-jében megkeresi azt a `<meta>` elemet, amelynek `name` értéke `viewport` (kis- és nagybetűre nem érzékeny), és megnézi a `content` értékét.

- **Megfelelő:** a `content` tartalmazza a `width=device-width` részletet (a `=` körül szóköz is lehet).
- **Hiba:** nincs viewport meta, vagy a `content` nem tartalmazza a `width=device-width` értéket.
- Ha az oldal nem HTML, a teszt nem értékelhető, és kimarad.

A teszt azt **nem** nézi, hogy a nagyítást letiltja-e a címke; ezt a [Nagyítás engedélyezve](https://hub.hellowp.io/hu/report/akadalymentesseg/nagyitas-engedelyezve/) teszt vizsgálja külön.

## Hogyan javítsd

Tedd az oldal `<head>` részébe:

```html title="HTML"
<meta name="viewport" content="width=device-width, initial-scale=1">
```

Az `initial-scale=1` a kezdeti nagyítást állítja be. Ne írd mellé a `user-scalable=no` vagy a `maximum-scale=1` értéket: ezek letiltják a nagyítást, és a gyengén látók nem tudják felnagyítani az oldalt.

### WordPress

A legtöbb téma kiírja a sort a `header.php`-ban vagy a témabeállításokból. Ha mégsem, a gyermektémába vagy egy saját bővítménybe tehetsz egy `wp_head` műveletet. Ha a téma vagy egy bővítmény már ír ki viewport sort, azt módosítsd, ne vegyél fel mellé másikat.

## Hogyan ellenőrizd

Futtasd újra a riportot. A böngészőben nézd meg az oldal forrását (nézetforrás), és keress rá a `viewport` szóra: egyetlen sornak kell lennie. Mobilnézetet a böngésző fejlesztői eszközei adnak (eszközszimuláció); a keresőmotor szemével a [Google Search Console](https://hub.hellowp.io/hu/knowledge-base/useful-tools/google-search-console/) segít.