Las consultas de medios de emulación del modo de dispositivo Chrome no funcionan

94

Por alguna razón, el modo de emulación de dispositivo no lee mis consultas de medios. Funciona en otros sitios, incluidos mis propios sitios que hice con bootstrap, pero no funciona en las consultas de medios que estoy usando desde cero (al hacer clic en el botón de consultas de medios, el botón se vuelve azul pero no se muestran las consultas de medios). Archivo de prueba a continuación. ¿Es esto un error en Chrome o hay algo que necesito cambiar en mi archivo?

<!DOCTYPE html>
<!--
Media Queries Example 1
Sam Scott, Fall 2014
-->
<html>
<head>
    <title>MQ Example 1</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body { font-family: sans-serif; }
        h1 { color: red; } 
        h2 { color:blue; }
        p { color:green; }

        @media (max-width: 768px) and (min-width: 481px) {
            h1 { color: green; } 
            h2 { color:red; }
            p { color:blue; }
        }

        @media (max-width:479px), print { 
            h1,h2,p { color:black; }
        }

        @media print {
            body { font-family: serif; }
        }


    </style>
</head>
<body>
    <h1>I'm a first level heading</h1>
    <p>I'm a paragraph.</p>
    <h2>I'm a second level heading</h2>
    <p>I'm another paragraph.</p>
</body>
</html>
css google-chrome media-queries developer-tools Sam Scott
fuente
2
Sam Scott: La respuesta de @BananaNeil es más satisfactoria que la mía, si puedes, marca la suya como la mejor respuesta.
Digger

Respuestas:

247

Solucioné este problema agregando una metaetiqueta a mi página:

 <meta name="viewport" content="width=device-width">

ACTUALIZACIÓN (diciembre de 2019):

Parece que también puede necesitar establecer la escala inicial y la escala mínima, así:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
BananaNeil
fuente
7
Esto funcionó para mí también. ¿Alguna idea de por qué esto resuelve el problema?
Richie Thomas
@BananaNeil: incluso yo tengo curiosidad por saber cuál es la razón detrás de esta solución para que funcione. Alguna idea ?
dreamweiver
2
Parece que el emulador de Chrome siempre intenta representar y reducir una 946pxpágina al tamaño de pantalla que esté emulando. Puede ver que esto es cierto al verificar que el ancho de la etiqueta del cuerpo de su página problemática esté siempre 946pxen el emulador. La etiqueta de la ventana gráfica le dice al navegador cómo debe intentar renderizar la página. width=device-widthactúa de la manera esperada, mientras width=100pxescala todo. Puede leer más sobre esto aquí: w3schools.com/css/css_rwd_viewport.asp
BananaNeil
2
También puede comportarse de manera peculiar si ha sobrepasado el zoom ... Solo obtiene las dimensiones que puede ingresar. En una Mac, si haces cmd shift -, eventualmente la lista de emuladores móviles aparecerá nuevamente con Galaxy S5, iPhone 6
etc.en
1
Es difícil recordar que este no es el predeterminado;)
doublejosh
19

La respuesta aceptada no lo hizo por mí, tuve que agregar minimum-scale=1también.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
sanjsanj
fuente
1
tienes razón, no estaba al tanto de esta propiedad agregadaminimum-scale = 1 .. thx
adnan tariq
6

La emulación de dispositivos en Chrome sigue siendo un WIP. Para ser honesto, creo que lo enviaron a Chrome demasiado pronto. Intente usar Canary (el navegador beta de Chrome) para probar la emulación, encuentro que funciona mucho mejor que el de Chrome.

Cavador
fuente
0

Funciona para mi.

Simplemente coloque una metaetiqueta de ventana gráfica en la sección del encabezado de su página. Ver ejemplo:

 <head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>
Nati Kamusher
fuente
0

Incluya esta metaetiqueta en su código: 

<head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>
Expandir fragmento

williamvivas
fuente
0

Seguí teniendo el mismo problema hasta que noté que si tengo más de una implementación para el mismo conjunto de reglas, dependiendo del tamaño de la pantalla:

Especifique el ancho mínimo y máximo para la misma consulta de medios para que no se sobrescriba con la siguiente:

@media screen and (min-width:9px , max-width:9px) {

    css.selector { 

        style rules gets applied : in this range of screen sizes ;

    } 

}


css.selector{


    the other style get applied : starting from 10px ;

}

O establezca al menos un punto de interrupción para todos:

@media screen and (min-width:9px) {

    some styles get applied : starting from this point ;

}

}

@media screen and (min-width:99px) {

    some styles gets applied : starting from this point ;

}

}
mostafa
fuente