# Метатег viewport

Viewport (видима область) - це область екрану, яка відображає вміст веб-сторінки. У контексті веб-розробки viewport - це вікно, через яке користувач бачить вміст веб-сторінки на своєму пристрої.

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FCkik2v6rnFfNMKwTyCUb%2Fje81L.png?alt=media&#x26;token=768953d7-21ff-4520-873b-8821737bfe17" alt=""><figcaption></figcaption></figure>

На різних пристроях (наприклад, комп'ютерах, планшетах, смартфонах) розмір та характеристики видимої області можуть бути різними. Це обумовлено різницею в розмірах екранів, пікселях на дюйм (DPI), орієнтацією екрану (портретна або горизонтальна) та іншими факторами.

Браузери на мобільних пристроях відображають веб-сторінку у в'юпорті, який ширший за фізичний екран пристрою. Зазвичай ширина вʼюпорту не збігається з фізичною шириною пристрою і найчастіше дорівнює <mark style="background-color:red;">980px</mark>. Відповідно браузер буде застосовувати і медіазапити відносно цього розміру.

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FqLn9n6QDo5aRFbM0DL0O%2Flayout-viewport.jpg?alt=media&#x26;token=688a067b-b69d-4dbb-87a5-c79fff6297dd" alt=""><figcaption></figcaption></figure>

Для розв'язання цієї проблеми в адаптивних дизайнах на мобільних пристроях використовують метатег viewport.

Метатег viewport є важливою частиною HTML-документа, яка визначає, як вміст сторінки має відображатися на екрані пристрою. Цей метатег надає вказівки браузеру щодо налаштувань відображення, таких як масштабування, ширина та висота екрану, ініціальний масштаб, можливість масштабування користувачем тощо.

```html
<head> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
```

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FV6CAjrn3L32PFuuXNO39%2Fmobile_mediaqueries.jpg?alt=media&#x26;token=ff7413f3-f777-45e7-8db7-11aaf35845c5" alt=""><figcaption></figcaption></figure>

<mark style="background-color:red;">width=device-width</mark>: Вказує браузеру використовувати фактичну ширину пристрою (device-width) як ширину відображення сторінки. Це дозволяє сторінці займати повну ширину екрану пристрою.

<mark style="background-color:red;">initial-scale=1.0</mark>: Задає ініціальний масштаб відображення сторінки. Значення 1.0 вказує на нормальний (100%) масштаб. Це означає, що сторінка буде відображатися в свойому природному розмірі без масштабування.

Використання метатега viewport допомагає забезпечити коректне та респонсивне відображення веб-сторінок на різних пристроях та розмірах екранів, враховуючи їхні різні характеристики та роздільні здатності.

**Покликання:**

[Докладніше про метатег viewport](https://www.quirksmode.org/mobile/viewports2.html)
