Для управления стилями страницы на разных ширинах экрана есть медиазапросы. Но их недостаточно для правильного масштабирования самой страницы на мобильных устройствах. Дело в том, что мобильные устройства рисуют страницу в ее настоящем размере, а затем масштабируют её (как правило, уменьшают), пытаясь подогнать под ширину экрана устройства. Но если вы предусмотрели мобильную версию, то страницу не нужно масштабировать.
С помощью метапараметра viewport можно управлять масштабом страницы на экранах устройств, которые этот масштаб пытаются изменить. Параметр задаётся в блоке head:
<meta name="viewport" content="width=device-width, initial-scale=1">По аналогии существуют атрибуты height и device-height
Атрибут width принимает либо абсолютные значения в пикселях, либо специальное значение device-width, которое означает ширину экрана.
По аналогии существуют атрибуты height и device-height
Большинство мобильных браузеров по умолчанию ставят значение width width равный ширине страницы.
initial-scale задаёт начальное масштабирование страницы. Значение 1 означает масштаб 100%, при котором один пиксель экрана будет соответствовать одному «ЦСС пикселю».
Некоторые другие параметры для управления масштабированием
Атрибуты minimum-scale и maximum-scale задают минимальный и максимальный масштабы, до которых пользователь может сжимать или растягивать страницу.
user-scalable принимает значения yes или no и включает‑выключает саму возможность масштабирования страницы.
Такое может понадобиться, например, на странице с картой на весь экран. Вероятно, вам нужно будет убрать нативный зум браузера и оставить только зум в самой карте.
Что ещё почитать
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.