В этой статье я поговорю о том как и для чего нужно использовать html meta тег — viewport. Приведу несколько примеров и дам краткон описание.

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

Статья от Google

Оригинал статьи можно найти по этой ссылке.

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

В целом, в ней говориться только об одном важном элементе — это HTML тэг meta viewport (снипет, которые указан ниже).

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

Что делает viewport? Этот снипет дает инструкцию мобильным устройствам покорректному отображению сайта.

Поделитально о свойстве выше:

используя width=device-width, вы говорите браузеру о том, что нужно вместить весь сайт в ширину пользовательского устройства.
некоторые из платформ, например iOS или Windows Phone все равно оставят ваш сайт выглядеть как на компьютере (как из под заголовка «Пример» — первый скриншот) — тогда нужно прописать вот так width=device-width, initial-scale=1. Это свойство говорит браузеру о том, что нужно 1 в 1 отобразить CSS пиксели относительно устройства пользователя.

Пример

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

Почему? Скорее всего ширину вашего сайта больше ширину экрана телефона и поэтому весь ваш сайта, старается вместиться в ширину девайса.

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

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

Установка определенной ширины экрана

Если вы хотите установить ширину для определенного устройства, например iPhone 5 с шириной крана (в вертикальном состоянии) 320px, то вы можете делать это следующим образом:

<meta name=viewport content="width=320px, initial-scale=1">

В этом примере ширина экрана будет фиксированная. Будьте аккуратный с этим свойством, так как данное свойство может отображаться по разному на разных девайсах.

Если вы исползуете фиксированную ширину, то это подразумевает использование нескольких meta viewport сразу (под несколько целевых устройств, например iPhone 4, 5, 6 и тд.).

Как узнать точные размеры устройств?

Узнать точные размеры мобильный устройств и планшетов можно на этом сайте.

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