AntonLitvinenko
@AntonLitvinenko
HTML coder

Как масштабировать сайт под маленькие устройства?

Всем привет, возник давеча такой вопрос.
Обычно при верстке я указываю для body min-width: 320px и в большинстве случаев этого хватает. Но возникла необходимость ограничить минимальную ширину в 480 пикселей. Я ожидал такого поведения, как в инспекторе, тобишь после 480 и вниз сайт будет пропорционально уменьшаться, но оказалась горизонтальная прокрутка.
вьюпорт обычно использую такой
<meta name="viewport" content="width=device-width, initial-scale=1">

но играния с настройками вьюпорта тоже ничего не дали.
Собственно, как сделать так, чтобы на телефоне с шириной 320 была не горизонтальная прокрутка, а чтобы сайт с минимальным разрешением в 480 вписался, уменьшив свой масштаб?
  • Вопрос задан
  • 250 просмотров
Решения вопроса 2
@ned4ded
Верстка, Фронтенд
Это решит проблему:
<meta name="viewport" content="width=device-width">


TL;DR

"Портативные устройства часто рендерят страницы в виртуальном окне, называемым вьюпортом, ширина которого обычно больше ширины экрана" - mdn. Для обхода этого поведения используется свойство width мета-аттрибута viewport, равное значению device-width: content="width=device-width". В таком случае ширина вьюпорта будет равна ширине экрана устройства.

width - не единственное свойство, позволяющие изменять заложенное поведение вьюпорта, полный список доступен на mdn или в спеке. Стоит отметить, что это драфт, но современные браузеры его стараются имплементировать.

Другое свойство, используемое тобой в примере, - initial-scale, устанавливающие зум вьюпорта в определенное значение при первичном запуске сайта. Значение может варьироваться от 0.1 до 10. При 1 зум равен ширине вьюпорта (можно сказать, что в данном случае зум отсутствует). По дефолту же зум равен значению auto, который высчитывается путем деления исходного значения вьюпорта на значение реально отрендеренного холста, что позволяет отобразить весь холст на экране (формула чуть сложнее). В твоем случае зум равен ширине экрана (т.к. ширина вьюпорта равна ширине экрана через width=device-width), т.е. 320px. Когда ты устанавливаешь ограничение на минимальную ширину тела документа, равную, например, 480px, то по дефолту у тебя будет горизонтальный скролл при зуме равном 1. Это логичное поведение, заложенное в спеке. Это как пытаться посмотреть сайт с ограничение в 1600px в ширину с ноутбука, там тоже будет горизонтальный скролл.

Чтобы обойти это поведение достаточно установить initial-scale в значение auto, или убрать это свойство вообще, т.к. это значение по дефолту.
Ответ написан
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Вам нужно указать device-width=480, но только при меньшей ширине. Тут без js не обойдешься.
Вот рабочий пример, вместо 640 подставьте свои значения. Размещайте скрипт прямо в странице, в шапке, как можно выше, но после тега с вьюпортом.
https://gist.github.com/delphinpro/a962978d668b63e...
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Wacdis
@Wacdis
Full-stack web-developer
Проще всего допилить стили до разрешения в 320 по ширине. Можно попробовать взять div в который поставить весь контент и ему transform scale сделать.
Ответ написан
Psixodelik
@Psixodelik
Преподаватель на Hexlet
Проверяйте ширину блоков. Скорее всего у вас где-то есть абсолютные значения, из-за которых происходит прокрутка. Их стоит перевести в относительные единицы. Не забывайте, что текст может выйти за границы своего родителя при экстремально малом разрешении
Ответ написан
Kozack
@Kozack
Thinking about a11y
И немного костылей сверху: htmlbook.ru/css/zoom
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
27 окт. 2020, в 22:07
50000 руб./за проект
27 окт. 2020, в 21:27
20000 руб./за проект
27 окт. 2020, в 20:58
60000 руб./за проект