Сергей!

Чтобы сайт отображался в одинаковом масштабе на всех мобильных устройствах, нужно задать ширину вьюпорта:

<head>
  <!-- ... -->
  <meta name="viewport" content="width=device-width">
</head>

Вьюпорт — это что‑то вроде виртуального окна, в котором отрисовывается сайт, а затем масштабируется и вписывается в окно браузера. По умолчанию виртуальное окно гораздо шире экрана устройства. Например, в Сафари ширина вьюпорта равна 980 пикселям, а ширина экрана — 320…414 пикселям, что даёт трёхкратный и двукратный зум.

Покажу на примерах, как влияет ширина вьюпорта на масштаб страницы:

980 пк
<meta name="viewport" content="width=980">
490 пк
<meta name="viewport" content="width=490">
Ширина устройства
<meta name="viewport" content="width=device-width">

Ещё по теме

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

Веб‑разработка
Отправить
Поделиться
Запинить

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