Школа
Веб-разработка

Что нужно, чтобы сайт на Айфоне выглядел также как на Андроиде, а не в два раза меньше?

Василий, что нужно прописать в стилях, чтобы сайт на Айфоне выглядел также как на Андроиде, а не в два раза меньше?

Сергей Филиппов
27 авг 2020
👁 5254   🗩1
Веб-разработка

Что нужно, чтобы сайт на Айфоне выглядел также как на Андроиде, а не в два раза меньше?

Василий, что нужно прописать в стилях, чтобы сайт на Айфоне выглядел также как на Андроиде, а не в два раза меньше?

Сергей Филиппов
27 авг 2020
👁 5254   🗩1
Василий Половнёв
Технический директор бюро
Полезно
 14
14
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Сергей!

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

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

Веб‑разработка
Полезно
 14
14
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Совет Юрия Мазурского про вьюпорт:
https://bureau.ru/soviet/20191121/

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

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