Дмитрий Газетдинов Дмитрий Газетдинов
3 г. назад

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

Для просмотра на мобильных устройствах, используется метатег 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 работало?Ответить
#Григорий22.02.2017 12:30
Хорошая статья, спасибоОтветить
#Виктория06.12.2017 23:05
Зачем нужна адаптация мобильной версии сайта и что это такое вообще? Вот недавно я задавалась тем же вопросом. Когда заимела свое дело, а это, не много нимало интернет магазин детских игрушек и других сопутствующих товаров, этот вопрос встал ребром. Не всегда оказалось люди открывают компьютер, что бы заказать товар. А более того, чаще это делают со своего смартфона. Ведь он служит так сказать заменой компьютеру или ноутбуку. Решила я для этого сделать мобильную верстку сайта, или по другому говоря: "адаптацию сайта под разные разрешения экрана". Сначала не скрою, изучив информацию пробовала самостоятельно. Но после тщетных пяти попыток плюнула на это и решила найти специалистов, которые сделают мне это качественно, быстро и не очень дорого. Но найти было не так просто. Либо цена меня не устраивала, либо то, как со мной общались потенциальные исполнители. В итоге нашла тех, кто мне подошел. К ним и обратилась. Сделали быстро и весьма за разумные деньги. breket-clinic.ru/Ответить

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

Наверх