2015
22
Ноя

Сайт под мобильную версию



Сейчас огромное количество мобильных устройств, которые используют для просмотра сайтов различного направления, но не все сайты бывают адаптированы под них. Для масштабирования дизайна используют тег Viewport, но этот тег можно прекрасно использовать для адаптирования дизайна сайта на мобильных современных устройствах.

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


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


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

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



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


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

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

Пример <meta name="viewport" content="width=1024">
viewport

Сравнивая два скриншота, можно увидеть, что сайт без тега (слева) несколько растянут и сдвинут вверх, а при добавлении тега это пространство появляется, и сайт более сжат.

И наоборот. <meta name="viewport" content="width=720">

Допустим ваш проект сайта узкий, например ширина 700px. Справа образовалось пустое пространство без использования тега, а при добавлении тега viewport width=720 iPhone масштабирует дизайн не меняя его и помещает в пространство 720 px.

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


Распространенная ошибка


Используя initial-scale=1, многие допускают ошибку, потому что это значение не отвечает размерам дизайна. Ваша страница без масштабирования отображается в масштабе 100 %. Объединяя user-scalable=no или maximum-scale=1с initial-scale=1, вы полностью отключаете масштабирование. Но без масштабирования увидеть всю страницу не возможно. Для неадаптированного сайта нельзя отключать масштабирование и сбрасывать начальный масштаб.

Мета тег viewport поможет решить проблему с разрешением.

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

где:

  • width=device-width - величина выставляемая самим устройством
  • initial-scale=1 - выставляется изначальный масштаб 1:1
  • maximum-scale=1.0, user-scalable=no - шкалирование запрещается (хотя даже при таких параметрах шкалирование будет, разработчики говорят что это не баг, а фича)

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


Проверить любую страницу для просмотра на мобильном устройстве можно на сайте.


Успехов Вам!