Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Дмитрий ГазетдиновДмитрий Газетдинов
1 г. назад

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

Для просмотра на мобильных устройствах, используется метатег 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. Адаптивная верстка для мобильных устройств

Комментарии

#Виталий15.11.2015 19:53
Спасибо! Очень помогло! Ответить
#Елена14.02.2016 01:00
А мне непонятно в какое именно место нужно вставлять данный тег. Перерыла уже весь интернет, конкретного ответа нигде найти не могу. Тег указывается, а место для него замалчивается почему-то. Подскажите, пожалуйста. Ответить
#Пал Палыч14.02.2016 11:52
Ставить надо в секцию head Ответить
#Светлана12.05.2016 14:16
Добрый день! Мне требуется вписать страницу шириной 1170px в экран мобильного устройства. Я добавила метатег . Все хорошо работает, кроме устройств на Windows Phone - там все равно отображается только часть страницы в масштабе 1:1.
Подскажите, пожалуйста, что можно попробовать, чтобы и на Windows Phone работало? Ответить

Добавить комментарий

Наверх