Почему графический виджет Chrome DevTools отвечает за 980 пикселей?

Я использовал Chrome DevTools для изменения размера окна просмотра до 480 пикселей в ширину, как показано ниже.

Я использую компоновку сетки bootstrap, поэтому я использую div.container, как показано в левом нижнем углу. Когда я наводил на него курсор, я вижу, что хром имеет ту особенность div, которая обозначена как ширина 750px (а целое body - 980px), хотя я явно имею экран с меньшим разрешением. Даже линейка сверху показывает, что она имеет ширину 480 пикселей.

Для дальнейшего подтверждения вы можете увидеть мультимедийный запрос, в котором указано, что ширина 750px должна быть установлена только с более высоким разрешением (мин. 768px), поэтому область просмотра предполагает, что она более высокая, чем она.

Я неправильно понимаю, как используется отзывчивая функция?

Спасибо!

Ответы

Ответ 1

Для принятия ответа

Как указано в комментариях: вам не хватает тега meta с видовым окном, которое требуется для того, чтобы медиа-запросы вступили в силу.

Ответ 2

Как было сказано выше, добавление метатага в заголовке html решит проблему. Ниже представлен элемент viewport, который должен быть включен во все ваши веб-страницы.

<meta name="viewport" content="width=device-width, initial-scale=1.0">