Плохая масштабируемость сайта на мобильных устройствах

Question

У меня есть сайт полностью адаптированный под мобильные устройства, но есть одна проблема, при открытии сайта на телефоне он как бы увеличен, а чтобы увидеть его в обычном состоянии, нужно его отдалить.

Это выглядит примерно так:

Полная версия выглядит так:

Я думаю, что проблема в стилях блоков ограничителей.

.wrapper {
    min-width: 1400px;
}

.container {
    max-width: 1700px;
    padding-left: 40px;
    padding-right: 40px;
    margin: 0 auto;
}

Структура html примерно такая:

<div class="wrapper">
       <section class="header">
            <div class="container">
                <h1 class="header__header">
                    Reptile - nursery with snakes, lizards, and other cold-blooded.
                </h1>
                <p>content content content content content content </p>
                <button class="header__button">Learn more</button>
            </div>
        </section>
</div>

Но в то же время, если убрать стили ограничивающих блоков, сайт адекватно не масштабируется:

Как это исправить?

Answer 1

Если вы хотите адаптировать сайт для мобильных устройств, то вам не следует настолько жёстко устанавливать ширину контейнеров. На данный момент ваш сайт не может быть меньше 1400px, что значительно превышает размер мобильного устройства, что и следует из его поведения на малых экранах. Позвольте .wrapper занимать все доступное пространство:

.wrapper {
  width: 100%;
}

А вот .container можно задать ограничения:

.container {
  max-width: 1700px;
  padding: 0 40px;
  margin: 0 auto;
}

БЛОГ НА HUSL

Плохая масштабируемость сайта на мобильных устройствах

Ответы (1 шт):