Просмотров: 2 868

Переводим масштаб просмотра веб-страниц в режим для мобильных устройств.

Давайте возьмем веб-страницу вот с таким исходным кодом:

<!doctype html>
<html>
<head>
    <title>Привет мир!</title>
</head>
<body>
    <p>Привет мир!</p>
</body>
</html>

Если открыть ее на мобильном устройстве, то она будет выглядеть примерно следующим образом:
image00

Текст выглядит очень мелко и прочитать его без масштабирования страницы просто не реально.

Теперь давайте посмотрим, как изменится ситуация, если в исходный код добавить одну строку между  тэгами <head> и </head>.

<!doctype html>
<html>
<head>
    <title>Привет мир!</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
    <p>Привет мир!</p>
</body>
</html>

image01

Теперь текст выглядит намного крупнее и его можно удобно читать.

Почему так происходит?

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

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

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

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

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

По сути, свойство viewport отвечает за тот масштаб, в котором необходимо отобразить страницу. Значение width=device-width означает, что ширина экрана для масштабирования будет выбираться исходя из ширины экрана того устройства, которое просматривает веб-страницу.

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