Минимальный размер дизайна под мобильные устройства бывает разным. Изначально минимальный размер под мобильные устройства был 320px. Со временем мобильные устройства стали большего размера и на сегодняшний день, вы можете встретить дизайны с минимальным размером под мобилку на 380, 375 или 360px.
Здесь может возникнуть вопрос, как сделать так чтобы сайт хорошо смотрелся и на самом минимальном размере в 320px.
Для этого мы поменяем стандартный тег meta viewport на другой, так чтобы дать браузеру прямую инструкцию — масштабировать сайт, если размер экрана меньше указанного. Вот как это выглядит:
Стандартный тег:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Заменяем на:
<meta name="viewport" content="width=360, initial-scale=1, shrink-to-fit=no">
Теперь на устройствах с размером менее чем 360px сайт в браузере будет автоматически масштабироваться так чтобы поместится по ширине, без горизонтального скролла.
