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

Question

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

Рейтинг: 0Ответов: 1Опубликовано: 15.05.2023

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

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

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

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

.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>

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

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

css html

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

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

.wrapper {
  width: 100%;
}

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

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

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

Ответы