<
  • Главная
Статьи

Що таке Viewport, як він працює і для чого взагалі потрібен

  1. Проблема мобільних браузерів
  2. Можливі параметри для мета-тега viewport
  3. Таблиця сумісності з viewport.
  4. два вьюпорті
  5. Масштабування (Zooming)
  6. Розуміння вьюпорті сторінки
  7. Android і target-densitydpi

Створимо просту сторінку з мінімальної розміткою:

<! Doctype html> <html> <head> <title> Hello world! </ Title> </ head> <body> <p> Hello world! </ P> </ body> </ html>

Тепер відкриємо цю сторінку на мобільному пристрої. Відкривши, побачимо, що наша сторінка відобразиться приблизно таким чином:

Відкривши, побачимо, що наша сторінка відобразиться приблизно таким чином:

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

Чому ж так відбувається?

Проблема мобільних браузерів

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

Якщо подумати логічно, то в цьому є сенс: мобільний браузер бачить сторінку і передбачає, що вона створена для деськтопной версії браузера, що вірно для переважної більшості сайтів. Виходячи з цього, цей браузер задає сторінці ширину 980px (Safari iPhone) і намагається оптимально вмістити її на екрані смартфона, відобразивши в максимально зменшеному масштабі. Зазвичай ширина сайтів приблизно такий і є, тому відкривши середньостатистичну веб-сторінку на мобільному пристрої, вона розтягнеться на всю свою ширину, але менше в 2-3 рази свого оригінального розміру.

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

І ось якраз для цього ми і будемо використовувати мета-тег viewport, який був введений компанією Apple і як зазвичай скопійований іншими.

Додамо в блок <head> </ head> наступний рядок:

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

І ось що вийде в результаті:

Зовсім інша справа. Задавши мета-тегу viewport значення "device-width", ми говоримо браузеру, що ширина області перегляду дорівнює ширині цього пристрою, а не стандартної ширині в 980px, як він може припускати за замовчуванням. На великій кількості смартфонів ширина екрану дорівнює 320px (в портретному режимі). Можна задати самостійно ширину в 320px, що дасть той же результат, але на деяких смартфонах ширина екрану може бути інший, тому найоптимальніший варіант - використовувати device-width.

Одним з найпоширеніших варіантів визначення області перегляду є наступний варіант:

<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

який визначає ширину сторінки і задає початковий масштаб.

Також, часто можна зустріти такий варіант:

<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

В такому випадку сторінці задається ширина пристрою, на якому вона відкрита, а також забороняється будь-яке масштабування - як початкова при завантаженні, так і для користувача - вже після завантаження. У такому режимі мобільна веб-сторінка функціонує як мобільний додаток, де користувачеві доступний тільки вертикальний або горизонтальний скрол. Однак такий запис краще не використовувати сліпо, тому що не можна забороняти користувачеві зменшувати і збільшувати масштаб за своїм бажанням, якщо того не вимагає дизайнерська задумка. Наприклад, занадто малий шрифт погіршує читабельність тексту і в такому випадку необхідно використовувати наближення.

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

<Meta name = "MobileOptimized" content = "320" /> <meta name = "HandheldFriendly" content = "true" />

Детальніше про ці та інші специфічних мобільних тегах можна почитати тут .

Можливі параметри для мета-тега viewport

Атрибут Можливе значення Опис 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.

Браузер / Платформа Використання браузер Android Так, але до версії 2.2 початкове масштабування одно 1,0. Symbian / S60, Nokia Series 40, Motorola Internet Browser, NetFront, Openwave (Myriad), Opera Mobile, Opera Mini Немає BlackBerry Ні до версії 4.2.1.
Так з версії 4.2.1 Internet Explorer Немає до IE6

Власне, якщо у вас немає планів заглиблюватися в нюанси та специфіку тега viewport, то на цьому можна і закінчити. Однак, якщо хтось хоче зрозуміти принцип роботи вьюпорті, і чим відрізняються візуальний вьюпорте і вьюпорте сторінки, можна почитати далі.
А допоможе нам в цьому доповнений мною переклад чудової статті Пітера-Пауля Коха ( Peter-Paul Koch ) A tale of two viewports - part two 🙂

два вьюпорті

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

Дуже непогано концепцію вьюпорте пояснює Джордж Камминс (George Cummins) на Stack Overflow :

Уявіть вьюпорте сторінки як велике зображення з незмінними розмірами і формою. Тепер уявіть меншу за розміром рамку, через яку ви дивитеся на це велике зображення. Ця рамка оточена непроникним матеріалом, який не дає вам побачити велике зображення повністю, за винятком окремих його частин. Частина великого зображення, яку видно через рамку, і буде візуальним вьюпорте. Якщо відійти з рамкою від великого зображення (zoom out, тобто зменшити масштаб), то можна побачити відразу всі зображення, або ж підійти ближче (zoom in, збільшити масштаб), тоді можна буде розглянути тільки частину зображення. Також, можна повертаючи рамку міняти її орієнтацію (на портретну або ландшафтну), при цьому розмір і форма великого зображення (вьюпорті сторінки) завжди залишається незмінною.

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

Користувач може скористатися прокруткою, щоб змінити видиму частину сторінки, або використовувати масштабування для зміни розмірів візуального вьюпорті

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

Таким чином, -Елемент спочатку приймає ширину вьюпорті сторінки і далі CSS поводиться так, якби екран був набагато ширше екрану телефону. Це забезпечує сайту таку ж поведінку, як і в десктопном браузері.

Який же ширини сам візуальний вьюпорте? Це залежить від браузера. Safari iPhone використовує 980px, Opera - 850px, Android WebKit - 800px, а IE - 974px.

Деякі браузери ведуть себе по-своєму:

Symbian WebKit намагається прирівняти вьюпорте сторінки до візуального вьюпорте, і це означає, що елементи з процентною шириною можуть вести себе непередбачувано. Однак, якщо сторінка не вміщається в візуальному вьюпорте через абсолютних величин браузер розтягує вьюпорте сторінки максимум до 850-ти пікселів.

Samsung WebKit робить вьюпорте сторінки рівним по ширині самого широкого елемента.

На BlackBerry при масштабі в 100% вьюпорте сторінки дорівнює буде візуальному вьюпорте при будь-яких розкладах.

Масштабування (Zooming)

Обидва вьюпорті вимірюються в CSS-пікселях. Однак, під час масштабування розміри візуального вьюпорті змінюються (при збільшенні масштабу на екрані вміщається меншу кількість CSS-пікселів), в той час як розміри вьюпорті сторінки залишаються незмінними. (Якби це було не так, браузер постійно здійснював би reflow сторінки через перерахунку процентної ширини.)

Розуміння вьюпорті сторінки

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

Справа в тому, що розміри вьюпорті сторінки браузерів повністю збігаються з екраном при максимально зменшеному масштабі і тому рівні візуальному вьюпрту.

Справа в тому, що розміри вьюпорті сторінки браузерів повністю збігаються з екраном при максимально зменшеному масштабі і тому рівні візуальному вьюпрту

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

При збільшенні масштабу користувачем ці розміри залишаються незмінними

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

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

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

Але для розробників більше важлива ширина, а не висота

Android і target-densitydpi

У пристроїв на платформі андроїд є свій атрибут для viewport, який вимикає масштабування для дисплеїв з різним дозволом.

<Meta name = "viewport" content = "target-densitydpi = high-dpi" />

На пристроях з HDPI (240dpi) не масштабування.

<Meta name = "viewport" content = "target-densitydpi = medium-dpi: />

На пристроях з MDPI (160dpi) не масштабування. Таке значення dpi встановлено за замовчуванням.

<Meta name = "viewport" content = "target-densitydpi = low-dpi: />

На пристроях з LDPI (120dpi) не масштабування

<Meta name = "viewport" content = "target-densitydpi = device-dpi" />

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

Офіційний гайд на developer.android.com

Чому ж так відбувається?
Який же ширини сам візуальний вьюпорте?


Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью