viewport. Адаптація під мобільні

Повноцінний адаптивний дизайн передбачає окремий макет, який комфортно моніторити на екранах невеликого розширення. Проте першим кроком до адаптації Ваших сайтів є наявність метатегу viewport.

Метатег viewport виводиться між тегами <head></head> і допомагає браузерам оптимальніше змасштабувати вигляд сайту на мобільних екранах.

<meta name="viewport" content="width=device-width">

Наведемо стандартний приклад. Для початку виведемо банальний напис Hello world у стандартному html-документі.

<!doctype html> 
<html> 
<head> 
 <title>Hello world!</title> 
</head> 
<body> 
 <p>Hello world!</p> 
</body> 
</html>

Відкрита в звичайному браузері, сторінка відображатиметься як належить.

viewport_2

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

viewport_1

Не вдаючись в особливі деталі, скажу, що відбувається так, оскільки мобільний намагається відобразити сторінку так як би він уявляв її розмір на реальному екрані. Метатег viewport, а зокрема параметр device-width дозволяють мобільному не думати, “що скажуть люди”, а інтерпретувати зображення сайту, відштовхуючись від власних розмірів.

viewport_3

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

Атрибут Возможное значение Описание
width Ціле, невід’ємне значення
(от 200px — 10,000px)
або ж константа device-width.		 Визначає ширину viewport.
Якщо ж ширина не вказана, то в мобільному Safari задається 980px, в Opera — 850px, в Android WebKit — 800px, а в IE — 974px.
height Ціле, невід’ємне значення
(от 223px до 10,000px)
або ж константа deviceheight		 Визначає висоту viewport. В більшості випадків цей атрибут не актуальний, оскільки висота задається контентом сторінки
initial-scale Число с точкою (комою) (від 0.1 до 10).
Якщо виставити значення 1.0 — масштабувати не буде		 Визначає початковий масштаб сторінки. При чому, чим більше число, тим більший масштаб
user-scalable no або yes Визначає, чи може користувач власноручно масштабувати сторінку.
Дефолтне значення: “yes” в мобільному Safari.
minimum-scale Число с точкою (від 0.1 до 10).
1.0 — не масштабуватиме		 Визначає мінімальний масштаб viewport. Дефолтне значення: “0.25” в мобільному Safari.
maximum-scale Число с точкою (від 0.1 до 10).
1.0 — не масштабуватиме		 Визначає максимальний масштаб viewport. Дефолтне значення: “1.6” в мобільному Safari.

Нажаль, viewport дозволяє лише масштабувати сторінку. Для створення повноцінної мобільної версії використовуйте @media.

2 коментаря для “viewport. Адаптація під мобільні”

  1. До речі, якраз маю собі записано питання про адаптивність дизайну під різні розміри екрану та про кросбраузерність, тому дякую. Заходила на свій сайт з телефону, то все виглядало нормально, окрім логотипу, який був завеликий для цього екрану і перекривав навіть надписи.
    Яке тут може бути вирішення?
    Я так розумію, що картинка має свій розмір, певну кількість пікселів у висоту та ширину, от вони і відображаються.

    1. Власне, тут ще залежить від зазначених властивостей об’єкту. Якщо на малюнку, або на батьківському діві буде виставлена ширина в 40-50%, наприклад width: 40%;, то обєкт буде займати півсторінки.

      Правиться це введенням додаткових параметрів для менших екранів через правило @media.
      в css записуємо ось таку конструкці. і між фігурними дужками зазначаємо властивість потрібного об’єкту.

      @media screen and (max-width: 1024px) {

      }

Залишити відповідь