viewport meta tag, масштабирование веб страниц в мобильных браузерах

Так уж сложилось, что мобильные браузеры появились сравнительно недавно, а сайтов в сети к тому времени уже было огромное количество. Естественно, все эти сайты совсем не были оптимизированы под маленькие экраны смартфонов, а смартфоны в свою очередь, вынуждены были полагать, что все сайты в ширину занимают где-то около 1000px (980px в сафари). Нужно было как-то решать сложившуюся ситуацию и в apple придумали метатег <meta name="viewport">, который по традиции потом сперли все остальные производители браузеров.

Давайте рассмотрим типично-эпичную верстку сайта:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title>
  </head>
  <body>
   <p> Hello world </p> 
  </body>
</html>

Откроем его в мобильном браузере. Вот что мы увидим:

Как вы правильно заметили, текст слишком мелкий и произошло это потому, что сафари попытался вместить наш сайт (который по его предположению сделан для браузеров с шириной экрана около 980pх)

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

html

<meta name="viewport" content="width=device-width">

Что получилось:

Ну вот, теперь все намного лучше. Обозначив width=device-width, мы сказали браузеру, что нам нужна область просмотра контента, равная ширине экрана мобильного устройства.

Можно вручную задать значение для width. Например content="width=320px", но этого не рекомендуется делать, потому-что различные смартфоны могут иметь абсолютно различную ширину экрана.

Очень распространенным вариантом является:

html

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

такой вариант задает ширину страницы и начальный масштаб (в данном случае без масштабирования)

Также часто используется следующий вариант:

html

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

Такие значения используют в случае, если сайт будет использоваться и функционировать как мобильное приложение. Т.е

  1. при загрузке страницы она не будет смасштабирована
  2. страница займет всю ширину мобильного браузера
  3. запрещено любое пользовательское масштабирование
  4. доступен только горизонтальный и вертикальный скролл

Используйте эту конфигурцию, только в том случае, если знаете, что делаете.

Давайте разберем допустимые параметры и их значения, доступные в мета теге viewport

width

Целое число (от 200px — 10,000px) или “device-width”.

Задает ширину viewport. Если нирина viewport не указана, то:

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

height

Целое число (от 223px до 10,000px) или “device-height”

задает высоту viewport. 99% случаев, просто не обращайте внимания на этот параметр, но если сильно надо – пробуйте и экспериментируйте. Удачи..

initial-scale

Доступные значения (от 0.1 до 10).

1.0 — не масштабировать. Задает масштаб страницы. Увеличиваем значение – увеличиваем масштаб.

user-scalable

Доступные значения no или yes

Задает возможнось изменения масштаба страницы. По-умолчанию установлено как yes в Safari.

minimum-scale и maximum-scale

Доступные значения (от 0.1 до 10).

1.0 — не масштабировать. Определяет минимальный и максимальный масштаб viewport соответственно.

По-умолчанию в мобильном Safari minimum-scale = "0.25", maximum-scale = “1.6”.

Совет: Не используйте мета-теги (в том числе и этот), пока не разобрались, зачем все это нужно. И тестируйте все в различных мобильных браузерах. Удачи!

17 комментариев на “viewport meta tag, масштабирование веб страниц в мобильных браузерах
  1. леха пишет:

    здорово, то что искал

  2. Турист пишет:

    Все хорошо, но у меня вот проблема с текстом на страницах, почему-то на всех компьютерах проблем нет, а на КПК текст не занимает всю ширину а только 60% хотя заголовки на всю ширину. Сколько пытаюсь использовать min-width и max-width результата никакого, не сталкивались с такой проблемой?

    • admin пишет:

      Привет! А есть демо?

    • SelenIT пишет:

      Это Андроид-браузер или Опера-мобайл? Там есть такая фича, позволяющая вписать текст в ширину экрана при 100%-м масштабе, сохранив общую раскладку страницы и картинки нетронутыми (чтобы увеличенный до 100% текст не приходилось при чтении скроллить по горизонтали). Всегда считал, что это не «исправляется», да и не нуждается в исправлении (лично мне на моем 4-дюймовом экране такое поведение очень удобно:), можно выключить только в самом браузере («Мобильный вид» в «Расширенных настройках» у Андроида). Но спасибо за хак с text-align: start — узнал новое, может пригодиться!

  3. Турист пишет:

    К сожалению “text-align: start;” не играет никакого значения в моем случае, текст лишь смещается как при “text-align: left;” причем эта проблема пока ничем не решается, пробовал на разных сайтах, например на этом я тренируюсь и экспериментирую сейчас http://i-turist.com/ тут в опере текст на мобильниках не растягивается во весь экран в первом блоке там где “Компания «Я турист» предлагает интересный отдых ….” , а на этом сайте http://s808.ru/ в опере блоки с описанием не растягиваются, в сафари они изначально растянуты, но стоит сделать масштабирование и увеличить для просмотра изображение как текст сразу съезжает и заполняет блок лишь на 60%.

  4. 77799 пишет:

    Не совсем правильно работает в firefox на android,косяк есть,не масштабируется при загрузке,репиты обрезаются из-за этого

  5. Марк пишет:

    Отличная статья!

  6. Ольга пишет:

    Была проблема, что сайт масштабировался на мобильном телефоне.Заменила на . В итоге на моём телефоне работает, а на других нет. На сайте http://www.responsinator.com/?url=http%3A%2F%2Fstrek-naturopathe.com тоже не работает((

    Адрес сайта http://strek-naturopathe.com/

    Это мой первый сайт-дипломный проект, может кто-нибудь подсказать, в чём проблема. Заранее спасибо!!

    • Ольга пишет:

      Не всё напечаталось, хотела сказать, что заменила “meta name=”viewport” content=”width=device-width, initial-scale=1.0″ на “meta name=”viewport” content=”width=device-width”

  7. Мама пишет:

    Добрый день, подскажите, вставил в хэдэр код: , но сайт для мобильных устройств всё равно не “ужимается”, meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1 уже всё перепробовал, подскажите в чём мой косяк?
    mummysblog.ru

  8. Hottey пишет:

    Поясните, пожалуйста, такую вещь. Гугл сейчас настоятельно требует указывать метатег viewport для всех сайтов. Но вот, если сайт не оптимизирован под моб. устройства, то какое лучше задать значение, чтобы пользователь сам масштабировал (увеичивал область)? Сайт этот http://hottey.com.ua/ . Ширина страницы сайта составляет 987 CSS-пиксилей (это минимум, если экран больше, то растягивается). Понятно, если писать content=”width=device-width, initial-scale=1.0 – то на мобиле будет кусок страницы. Какие мне нужно указывать атрибуты и параметры, чтобы в принципе ничего не поменялось (браузер устройства сам же масштабирует, если тег viewport не задан)?

  9. Евгений пишет:

    Здравствуйте! Очень полезный мета-тег. Очень помог.
    Может Вы сможете подсказать следующее:

    есть сайт. Он имеет ширину в 960 пикселей, из которых 650 – 1 колонка и 310 – вторая.

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

    Делал так:

    if width() < 800 {

    *надо как-то указать что бы либо страница фиксировалась горизонтально* }

  10. Дмитрий пишет:

    Спасибо. Давно стоит проблема с этим тэгом и не до конца было понятно где и как его прописывать.

Оставить комментарий

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

*

* Copy This Password *

* Type Or Paste Password Here *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Узнавай о новых статьях первым!

Спасибо за лайк в FACEBOOK
Подписывайтесь на новости вконтакте
Последние статьи от html5.by