css - other - device mode chrome

¿Por qué la ventana Adaptable de Chrome DevTools cree que tiene 980 píxeles de ancho?

Question

Utilicé Chrome DevTools para cambiar el tamaño de la ventana gráfica a 480 píxeles de ancho, como se muestra a continuación.

Estoy usando el diseño de cuadrícula de bootstrap, así que tengo un div.container que estoy usando, como se muestra en la parte inferior izquierda. Cuando cierro sobre él, veo que Chrome tiene ese div particular marcado como ancho 750px (y todo el body es 980px ), aunque claramente tengo la pantalla configurada en una resolución más pequeña. Incluso la regla en la parte superior muestra que tiene 480 píxeles de ancho.

Para una mayor confirmación, puede ver la consulta de medios que dice que el ancho de 750px solo debe establecerse a resoluciones más altas (mínimo 768px), por lo que la ventana gráfica asume que es un ancho mayor de lo que es.

¿Estoy entendiendo mal cómo se usa la función de respuesta?

¡Gracias!

Answer 1

Para aceptar respuesta

Como se indica en los comentarios: le falta una meta con la ventana gráfica necesaria para que las consultas de los medios surtan efecto.

Answer 2

Como se respondió anteriormente, agregar una metaetiqueta en el encabezado html resolverá el problema. A continuación se muestra el elemento de ventana, que debe incluirse en todas sus páginas web

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