css - movil - Las consultas de medios de emulación de modo de dispositivo Chrome no funcionan
responsive mode in chrome (4)
Funciona para mi.
Simplemente coloque una metaetiqueta de ventana gráfica en la sección de 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>
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 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 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>
La emulación de dispositivo en Chrome sigue siendo una WIP. Para ser sincero, creo que lo empujaron a Chrome demasiado pronto. Intente usar Canary (el navegador beta de Chrome) para probar la emulación, me parece que funciona mucho mejor que el de Chrome.
La respuesta aceptada no lo hizo por mí, tuve que agregar una
minimum-scale=1
también.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
Solucioné este problema agregando una metaetiqueta a mi página:
<meta name="viewport" content="width=device-width">