• Главная»
  • Уроки»
  • CSS»
  • Использование мета тега viewport в неадаптивных шаблонах

Использование мета тега viewport в неадаптивных шаблонах

Нет сомнения, что вы используете мета тег viewport при работе с адаптивными шаблонами. Но знаете ли вы, что мета тег viewport может быть полезен и для неадаптивных шаблонов? Если у вас нет времени для конвертации шаблона своего проекта в адаптивный, то следует прочесть материалы данного урока, чтобы использовать мета тег viewport для улучшения вида вашего дизайна на мобильных устройствах.

 

Обычное использование мета тега viewport

 

Обычно мета тег viewport используется для установки ширины и начального масштаба для окна просмотра на мобильных устройствах. Вот пример.

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

 

Использование мета тега viewport в неадаптивном шаблоне

По умолчанию ширина окна просмотра на iPhone устанавливается равной 980px. Но ваш дизайн может плохо соответствовать данному диапазону. Значение может быть для шаблона слишком большим или маленьким. Ниже приводится два примера. которые используют мета тег viewport для улучшения внешнего вида неадаптивного шаблона на мобильных устройствах.

Пример

Посмотрите на сайт Themify с мобильного устройства.

Искажения шаблона на мобильном устройстве

Левый снимок экрана демонстрирует внешний вид сайта без использования мета тега viewport. Можно заметить, что страница касается обеих сторон экрана. Если добавить мета тег viewport с указанием ширины 1024px, то будет оставаться зазор слева и справа.

<meta name="viewport" content="width=1024">

Другой пример

Если ваш дизайн слишком узкий, то он тоже будет выглядеть коряво. Допустим, ширина контейнера 700px и он не адаптируется. В таком случае внешний вид будет как ниже приведенном слева снимке экрана - широкая белая полоса слева.

Узкий неадптивный шаблон

Проблему легко устранить установив ширину окна просмотра 720px. Ширина дизайна не изменяется, но мобильное устройство будет масштабировать его до 720px.

<meta name="viewport" content="width=720">

 

Общая ошибка

Общая ошибка заключается в том, что разработчики часто используют значение initial-scale=1 для неадптивных шаблонов. Такая установка приводит к отрисовке 100% страницы без масштабирования. Если дизайн неадаптивный, то пользователю приходится либо много прокручивать, либо вручную устанавливать масштаб, чтобы увидеть всю страницу. Самый плохой случай - сочетание user-scalable=no или maximum-scale=1 с initial-scale=1. Таким образом отключается возможность масштабирования на сайте. А без масштабирования нет возможности увидеть всю страницу. Если ваш шаблон не адаптивный,не отключайте масштабирование и не сбрасывайте начальный масштаб!

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

Отключение масштабирования

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design
Перевел: Сергей Фастунов
Урок создан: 10 Октября 2012
Просмотров: 206038
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 26 Октября 2012 02:41
    master_z1zzz
    Спасибо за урок, будем применять)
  • 12 Марта 2013 12:08
    Sergeyphp
    jjkjjkk;nkj
    • 19 Марта 2013 00:34
      Squash
      Наконец-то нашел кто написал в 2013!!!
  • 22 Февраля 2014 03:31
    webskills
    Большое спасибо. То что надо!!!!
  • 4 Марта 2016 16:45
    Vodnicear Grigore
    http://gsm.zone
  • 4 Ноября 2016 11:16
    zoia petrovma
    Применил на сайте http://remobile96.ru результат очевиден.
^ Наверх ^