Почему мой адаптивный сайт увеличен на мобильных устройствах?

Question

Итак, я создал простую целевую страницу для вымышленной компании, чтобы попробовать css-grid, и я попытался сделать сайт отзывчивым.Сначала я пытался без медиа-запросов, но позже я думаю, медиа-запросы, где это необходимо.Дело в том, что в браузере все выглядит хорошо, когда я изменяю размер.Все соответствует так сказать.Но когда я захожу на сайт с моего телефона, он как бы увеличивается. То же самое можно увидеть, когда вы пробуете сайт в devtools и выбираете разные устройства для опробования сайта.

Я думал, что эта проблемабудет решен путем добавления тега <meta name="viewport" content="width=device-width, initial-scale=1.0">.Но это не решило проблему.

Вы можете посетить сайт здесь и поиграть с ним

и вот репо, где вы можете проверитькод

Answer 1

Похоже, ваш сайт достигает минимальной ширины.Я открыл его в браузере на моем компьютере и изменил размеры окна, и слова в заголовке, кажется, оборачиваются правильно, так как страница становится все меньше и меньше.Однако, когда окно становится слишком маленьким, они перестают переноситься.Я подозреваю, что это может быть вызвано минимальной шириной.

---

Глядя на ваш код CSS в вашем репо, похоже, что ваша grid-template-columns может быть причиной минимальной ширины.Возможно, эта строка:
grid-template-columns: repeat(3, minmax(150px, 300px));

Для просмотра сайта на мобильном устройстве, в частности, я бы порекомендовал иметь один столбец на всем протяжении страницы.Трудно поместить несколько столбцов рядом друг с другом на мобильном устройстве, например в телефоне, в портретной ориентации, при этом каждый столбец не становится слишком сжатым.

Answer 2

В вашем CSS для .articles-container есть строка grid-template-columns: repeat(3, minmax(150px, 300px));.

Это минимальная ширина столбца сетки, равная 150px.На экране мобильного телефона это будет 3 х 150 пикселей, поэтому он будет шире, чем ширина экрана.