x
 
Юрий Мазурский
21 ноября 2019
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Что делает тег meta с атрибутом name="viewport"? Зачем его указывать?


Для управ­ле­ния сти­лями стра­ницы на раз­ных шири­нах экрана есть меди­аза­просы. Но их недо­ста­точно для пра­виль­ного мас­шта­би­ро­ва­ния самой стра­ницы на мобиль­ных устрой­ствах. Дело в том, что мобиль­ные устрой­ства рисуют стра­ницу в ее насто­я­щем раз­мере, а затем мас­шта­би­руют её (как пра­вило, умень­шают), пыта­ясь подо­гнать под ширину экрана устрой­ства. Но если вы преду­смот­рели мобиль­ную вер­сию, то стра­ницу не нужно масштабировать.

С помо­щью мета­па­ра­метра viewport можно управ­лять мас­шта­бом стра­ницы на экра­нах устройств, кото­рые этот мас­штаб пыта­ются изме­нить. Пара­метр зада­ётся в блоке head:

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

По аналогии существуют атрибуты height и device-height

Атри­бут width при­ни­мает либо абсо­лют­ные зна­че­ния в пик­се­лях, либо спе­ци­аль­ное зна­че­ние device-width, кото­рое озна­чает ширину экрана.

По аналогии существуют атрибуты height и device-height

Боль­шин­ство мобиль­ных бра­у­зе­ров по умол­ча­нию ста­вят зна­че­ние width 980 пик­се­лей. Это озна­чает, что если ваша стра­ница имеет фик­си­ро­ван­ную ширину меньше 980 пик­се­лей, то справа будет пустое про­стран­ство. В таких слу­чаях, если не преду­смот­рено мобиль­ной вер­сии, имеет смысл попро­бо­вать поста­вить width рав­ный ширине страницы.

initial-scale задаёт началь­ное мас­шта­би­ро­ва­ние стра­ницы. Зна­че­ние 1 озна­чает мас­штаб 100%, при кото­ром один пик­сель экрана будет соот­вет­ство­вать одному «ЦСС пикселю».

Некоторые другие параметры для управления масштабированием

Атри­буты minimum-scale и maximum-scale задают мини­маль­ный и мак­си­маль­ный мас­штабы, до кото­рых поль­зо­ва­тель может сжи­мать или рас­тя­ги­вать страницу.

user-scalable при­ни­мает зна­че­ния yes или no и вклю­чает‑выклю­чает саму воз­мож­ность мас­шта­би­ро­ва­ния страницы.

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

Что ещё почитать

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Что делать, если меня, технического директора, потихоньку отстраняют от дел? Типовые решения в вёрстке. Почему не стоит использовать float 2 3 Как написать аккуратный код? Часть третья: заменяемость




Недавно всплыло

Как избежать «эффекта Тильды»? 3 9 3 Как работать в Фигме быстрее. Часть 3 1