Мета-тег viewport.

Привіт всім і сьогодні ми поговоримо про те, що таке viewport і як його використовувати.

Для того, щоб зрозуміти, що це таке, вам потрібно яке-небудь мобільний пристрій. Тепер давайте створимо просту html сторінку такого змісту:

 
lang="En"gt; 
 
charset="UTF-8"gt; 
Test 
 
 
 test post 
 this is a test post 
 another post 
 this is pretty cool 
href="#"gt;New Post

Тепер відкриємо нашу сторінку на мобільному пристрої і що ми побачимо? А побачимо ми, що текст занадто маленький і читати його складно. Однак, якщо ми додамо тег viewport такого змісту в тег head

 
name="Viewport"content="Width = device-width"gt;

То тепер текст виглядає нормально. Ось малюнок. Зліва без тега viewport, а справа з ним

Відео: Популярні відео - Порт перегляду і Метатеги

viewport

Чому ж так відбувається? Справа в тому, що браузер за замовчуванням думає, що сайт зроблений для деськтопной версії браузера і намагається повністю вмістити його в вікно вашого смартфона. Задавши же тег viewport, ми говоримо браузеру телефону, що ширина перегляду дорівнює ширині смартфона. Ось такий простий тег, але він дуже допомагає при створенні мобільної версії сайту.

Також можна задати масштаб. Для цього використовується inital-scale

name="Viewport"content="Width = device-width, initial-scale = 1.0"gt;

Якщо ви хочете заборонити користувачеві змінювати масштаб сторінки на його смартфоні, то можете прописати наступне:

name="Viewport"content="Width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no"gt;

Але потрібно бути акуратним, тому що буває, що текст досить важко прочитати і доводиться його збільшувати, але якщо це буде заборонено, то ви доставите незручності користувачеві.