Что такое Viewport, как он работает и для чего вообще нужен
Задав мета-тегу viewport значение “device-width”, мы говорим браузеру, что ширина области просмотра равняется ширине этого устройства, а не стандартной ширине в 980px, как он может предполагать по-умолчанию. На большом количестве смартфонов ширина экрана равняется 320px (в портретном режиме). Можно задать самостоятельно ширину в 320px, что даст ...
Создадим простую страничку с минимальной разметкой:
<!doctype html>
<html>
<head>
<title>Hello world!</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Теперь откроем эту страничку на мобильном устройстве. Открыв, увидим, что наша страница отобразится примерно таким образом:
Как видно, текст слишком мелкий для чтения, есть куча пустого пространства, и для того, чтобы прочесть этот текст, нам нужно его увеличивать приближением.
Почему же так происходит?
Проблема мобильных браузеров
При сравнении мобильных и десктопных браузеров наиболее очевидное различие — размер экрана. Мобильные браузеры по-умолчанию отображают сайты, созданные для обычных десктопных браузеров, гораздо хуже, чем могли бы: либо путем уменьшения масштаба, делая текст и другой контент слишком мелким и нечитаемым (как в нашем варианте), либо отображая лишь небольшую часть сайта, которая умещается на экране.
Если подумать логически, то в этом есть смысл: мобильный браузер видит страницу и предполагает, что она создана для десктопной версии браузера, что верно для подавляющего числа сайтов. Исходя из этого, этот браузер задает странице ширину 980px (Safari iPhone) и пытается оптимально уместить ее на экране смартфона, отобразив в максимально уменьшенном масштабе. Обычно ширина сайтов примерно такой и является, поэтому открыв среднестатистическую веб-страницу на мобильном устройстве, она растянется на всю свою ширину, но меньше в 2-3 раза своего оригинального размера.
Поэтому, если мы хотим оптимизировать сайт для смартфонов, этот вариант не катит. Нужно каким-нибудь образом сообщить браузеру, что наша страница предназначена для отображения на мобильных устройствах и задать правила для правильного поведения области просмотра.
И вот как раз для этого мы и будем использовать мета-тег viewport, который был введен компанией Apple и как обычно скопирован остальными.
Добавим в блок HEAD следующую строку: <meta name="viewport" content="width=device-width">
И вот что получится в результате:
Совсем другое дело. Задав мета-тегу viewport значение “device-width”, мы говорим браузеру, что ширина области просмотра равняется ширине этого устройства, а не стандартной ширине в 980px, как он может предполагать по-умолчанию. На большом количестве смартфонов ширина экрана равняется 320px (в портретном режиме). Можно задать самостоятельно ширину в 320px, что даст тот же результат, но на некоторых смартфонах ширина экрана может быть другой, поэтому самый оптимальный вариант — использовать device-width.
Одним из самых распространенных вариантов определения области просмотра является следующий вариант: <meta name="viewport" content="width=device-width, initial-scale=1.0">
который определяет ширину страницы и задает начальный масштаб.
Также, часто можно встретить такой вариант: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
В таком случае странице задается ширина устройства, на котором она открыта, а также запрещается любое масштабирование — как начальное при загрузке, так и пользовательское — уже после загрузки. В таком режиме мобильная веб-страница функционирует как мобильное приложение, где пользователю доступен только вертикальный или горизонтальный скролл. Однако такую запись лучше не использовать слепо, ибо нельзя запрещать пользователю уменьшать и увеличивать масштаб по своему желанию, если того не требует дизайнерская задумка. К примеру, слишком малый шрифт ухудшает читабельность текста и в таком случае необходимо использовать приближение.
Мета-тег viewport — относительно новый, поэтому на данный момент поддерживается не всеми браузерами, особенно это касается старых моделей смартфонов. В таких случаях есть смысл использовать некоторые старые методы, которые позволяют браузеру идентифицировать страничку, как оптимизированную под мобильный веб. Это можно сделать, с помощью следующий мета-тегов:
<meta name="MobileOptimized" content="320"/>
<meta name="HandheldFriendly" content="true"/>
| Атрибут | Возможное значение | Описание |
|---|---|---|
| width | Целое неотрицательное значение (от 200px — 10,000px) или константа device-width. | Определяет ширину viewport. Если ширине не указана, в мобильном Safari устанавливается значение 980px, в Opera — 850px, в Android WebKit — 800px, а в IE — 974px. |
| height | Целое неотрицательное значение (от 223px до 10,000px) или константа deviceheight | Определяет высоту viewport. В большинстве случаев на этот атрибут можно не обращать внимание |
| initial-scale | Число с точкой (от 0.1 до 10). Значение 1.0 — не масштабировать | Определяет начальный масштаб страницы. Чем больше число, тем выше масштаб. |
| user-scalable | no или yes | Определяет, может ли пользователь изменять масштаб в окне. По-умолчанию “yes” в мобильном Safari. |
| minimum-scale | Число с точкой (от 0.1 до 10). 1.0 — не масштабировать | Определяет минимальный масштаб viewport. По-умолчанию “0.25” в мобильном Safari. |
| maximum-scale | Число с точкой (от 0.1 до 10). 1.0 — не масштабировать | Определяет максимальный масштаб viewport. По-умолчанию “1.6” в мобильном Safari. |
Рекомендуем
