Адаптація сайту на мобільних пристроях

1. Ширина сайту на екранах мобільних пристроїв
2. Висота сайту на екранах мобільних пристроїв
3. Масштабування сайту на екранах мобільних пристроїв
4. підсумок
5. Читайте також

Для перегляду на мобільних пристроях, використовується метатег viewport. Він повідомляє браузеру, яким чином потрібно контролювати відображення сайту на мобільних пристроях (до них так само відносяться і планшетні комп'ютери).

Цей метатег вставляють в контейнер head вашого сайту.

Див. Приклад.

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

За замовчуванням мобільні браузери відображають сторінку сайту точно так само як і в ПК. Що природно псує зовнішній вигляд сайту і робить мало придатним для використання сайту на мобільних пристроях.

Для більш детальної настройки відображення використовуємо додаткові значення

Ширина сайту на екранах мобільних пристроїв

Дозволяє адаптувати ширину сайту під ширину екрану пристрою

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

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

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

<Meta name = "viewport" content = "width = 600">

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

Потрібно ще враховувати ту обставину що задавши фіксовану ширину відображення контенту ми отримаємо однаковий результат на різних дозволах екрану. Але все одно при будь-якому дозволі самого екрану сторінка буде відображатися на весь екран. Це дасть нам дві основні переваги.

• Ми отримаємо однакове відображення на різних дозволах екранів
• Нам потрібно міняти стилі тільки для цього медізапроса, а не підлаштовувати під кожний дозвіл екрана

@media screen and (max-width: 600px) {...}

Висота сайту на екранах мобільних пристроїв

У деяких мобільних браузерах при інтерполяції сторінки сайту висота сайту відображається некоректно.

Для виправлення цієї помилки ми можемо використовувати правило

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

Масштабування сайту на екранах мобільних пристроїв

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

дозволити

<Meta name = "viewport" content = "user-scalable = yes">

заборонити

<Meta name = "viewport" content = "user-scalable = no">

підсумок

І так ми створили свій viewport і так само для нього створили медіапзапрос

У наш медіазапросе створили необхідні для нас стилі. Що у нас вийшло бачимо на рис.3 або по засланні (Заходимо з мобільних пристроїв)

viewport

<Meta name = "viewport" content = "height = device-height, width = 600, user-scalable = yes">

медіазапрос

@media screen and (max-width: 600px) {body {font-size: 1.5em; } ... ... ... ... h2 {font-size: 2.5em; }}

рис.1 Відображення сайту без метатега viewport

рис.2 Відображення сайту з атрибутом width = device-width

рис.3 Відображення сайту з атрибутом width = 600

Читайте також

1. Фреймворк для адаптивної верстки
2. Адаптивна верстка для мобільних пристроїв

Додати коментар