Метатег viewport
Last updated
Last updated
Viewport (видима область) - це область екрану, яка відображає вміст веб-сторінки. У контексті веб-розробки viewport - це вікно, через яке користувач бачить вміст веб-сторінки на своєму пристрої.
На різних пристроях (наприклад, комп'ютерах, планшетах, смартфонах) розмір та характеристики видимої області можуть бути різними. Це обумовлено різницею в розмірах екранів, пікселях на дюйм (DPI), орієнтацією екрану (портретна або горизонтальна) та іншими факторами.
Браузери на мобільних пристроях відображають веб-сторінку у в'юпорті, який ширший за фізичний екран пристрою. Зазвичай ширина вʼюпорту не збігається з фізичною шириною пристрою і найчастіше дорівнює 980px. Відповідно браузер буде застосовувати і медіазапити відносно цього розміру.
Для розв'язання цієї проблеми в адаптивних дизайнах на мобільних пристроях використовують метатег viewport.
Метатег viewport є важливою частиною HTML-документа, яка визначає, як вміст сторінки має відображатися на екрані пристрою. Цей метатег надає вказівки браузеру щодо налаштувань відображення, таких як масштабування, ширина та висота екрану, ініціальний масштаб, можливість масштабування користувачем тощо.
width=device-width: Вказує браузеру використовувати фактичну ширину пристрою (device-width) як ширину відображення сторінки. Це дозволяє сторінці займати повну ширину екрану пристрою.
initial-scale=1.0: Задає ініціальний масштаб відображення сторінки. Значення 1.0 вказує на нормальний (100%) масштаб. Це означає, що сторінка буде відображатися в свойому природному розмірі без масштабування.
Використання метатега viewport допомагає забезпечити коректне та респонсивне відображення веб-сторінок на різних пристроях та розмірах екранів, враховуючи їхні різні характеристики та роздільні здатності.
Покликання:
