Мета-тег viewport.
Привет всем и сегодня мы поговорим о том, что такое viewport и как его использовать.
Для того, чтобы понять, что это такое, вам нужно какое-нибудь мобильное устройство. Теперь давайте создадим простую html страничку такого содержания:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<h4>test post</h4>
<p>this is a test post</p>
<h4>another post</h4>
<p>this is pretty cool</p>
<a href="#">New Post</a>
</body>
</html>
Теперь откроем нашу страницу на мобильном устройстве и что мы увидим? А увидим мы, что текст слишком маленький и читать его сложно. Однако, если мы добавим тег viewport следующего содержания в тег head
<head>
<meta name="viewport" content="width=device-width">
</head>
То теперь текст выглядит нормально. Вот рисунок. Слева без тега viewport, а справа с ним
Почему же так происходит? Дело в том, что браузер по-умолчанию думает, что сайт сделан для десктопной версии браузера и пытается полностью вместить его в окно вашего смартфона. Задав же тег viewport, мы говорим браузеру телефона, что ширина просмотра равна ширине смартфона. Вот такой простой тег, но он очень помогает при создании мобильной версии сайта.
Также можно задать масштаб. Для этого используется inital-scale
<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">
Но нужно быть аккуратным, т.к. бывает, что текст достаточно трудно прочитать и приходится его увеличивать, но если это будет запрещено, то вы доставите неудобства пользователю.
Поддержка браузерами
Android поддерживает, но до версии 2.2. начальный масштаб равен 1.0
Symbian, Nokia 40 серии, Motorola, Opera mobile/mini и NetFront не поддерживают
IE поддерживает с 6 версии
BlackBerry поддерживает с версии 4.2.1
Как вы можете видеть, поддержка пока что неполная, но вы уже можете использовать этот тег, т.к. большинство новых смартфонов уже его понимают.
Итак, на этом я заканчиваю эту статью, спасибо за внимание.
-
Создано 02.06.2014 17:57:43
-
Михаил Русаков
Комментарии (1):
Довольно хороший тег viewport!
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.