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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

viewport

медіазапит

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