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

С помощью метапараметра 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы