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

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

Добрый день, а точнее уже ночь, дорогие друзья. Буквально несколько минут назад я занимался внесением некоторых плавок в шаблон. Шаблон был неадаптивный и проблема была в его структуре, он скрывал часть контента (необходимость в этом была), а при заходе с мобильного браузера (с телефона или планшета), обрезался как контент, так и кусок страницы. Пробовал исправить это недоразумение, и в ходе "полевых испытаний на практике" я понял, что лучшее решение - это использование мета тега viewport.

 

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

 

Посмотрим на возможные правила для использования тега:

1. Width

Этим мы указываем целое число в пикселях (от 200px до 10000px) или же "device-width". Это задает ширину viewport, если же ширина не указана вам, то берется автоматически:

  • 980px - для мобильного Safari
  • 850px - Opera
  • 800px - Android WebKit
  • 974px - IE

 

2. Height

Работает по тому же принципу, что и width. Однако зачастую в 99% случаев он просто напросто не используется, так что можете его не выставлять, если не знаете нужен он вам или нет. Во всяком случае можете поэкспериментировать с ним...

 

3. Initial-scale

Данный параметр задает масштаб страницы. Всё элементарно тут, увеличиваем значение - увеличиваем масштаб. Для него доступны следующие значения от 0.1 и до 10. Если выставить 1.0, то тем самым мы укажем не масштабировать страницу.

 

4. User-scalable

Задает возможность изменения масштаба страницы. Может наследовать значения yes или же no. В браузере Safari стандартно стоит значение yes,

 

5. Minimum-scale и maximum-scale

Эти параметры определяют минимальный и максимальный допустимые масштабы мета тега viewport. Доступные значения для него от 0.1 и до 10. Если выставить 1.0, то мы дадим знать браузеру, чтобы он не масштабировал страницу. В мобильном браузере Safari выставлены значения minimum-scale = "0.25" и maximum-scale = "1.6".

 

Теперь перейдем непосредственно к примерам использования. 

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

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

Пример, что выше обычно использует большинство у кого шаблоны адаптивные, даже у меня в блоге culabra.ru используется примерно такой же вариант. А что делать если у вас не адаптивных дизайн и он криво отображается на телефон или планшете? В таком случае у меня для вас следующий пример, он как раз и помог мне с проблемкой, о которой я описывал в начале. 

 

Использование мета тега viewport с указанием ширины:

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

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

Точно по такому же примеру можно пойти, если у вас контент не широкий (не обрезается браузером), а наоборот узкий (появляется пустое место где-то):

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

Типичная ошибка, которая может возникнуть у вас при использовании мета тега viewport исходит из того, что вы будете использование значение 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">

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

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

Некоторые считают, что прокрутка влево или вправо очень плохо и некрасиво. Конечно же это не плохо, это скорее на мой взгляд неудобно, но порой эта необходимость бывает нужна. Например, у моего заказчика есть сайт. Он имеет полную и мобильную версию, каждая из этих версий - это разные шаблоны. Соответственно в шаблоне для десктопа нет смысла делать какие-то сложные адаптации и навороты для телефонов, достаточно тега viewport, а в мобильном да, все под телефоны. Тут уже кому как удобнее будет пользоваться, 2 альтернативы так скажем... Всем спасибо, удачи!

Запись опубликована В категории: HTML/CSS

Shnapik

Вебмастер с опытом ищет приют! Возьмите меня, а то меня рвут!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *