¿Por qué mis consultas de medios CSS3 no funcionan en dispositivos móviles?
En estilos.css, estoy usando consultas de medios, las cuales usan una variación de:
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
Los sitios cambian de tamaño al diseño que quiero en un navegador normal (Safari, Firefox) cuando reduzco la ventana; sin embargo, el diseño móvil no se muestra en absoluto en un teléfono. En cambio, solo veo el CSS predeterminado.
¿Alguien puede indicarme la dirección correcta?
Los tres fueron consejos útiles, pero parece que necesitaba agregar una metaetiqueta:
<meta content="width=device-width, initial-scale=1" name="viewport" />
Ahora parece funcionar tanto en Android (2.2) como en iPhone...
No olvide tener las declaraciones CSS estándar encima de la consulta de medios o la consulta tampoco funcionará.
.edcar_letter{
font-size:180px;
}
@media screen and (max-width: 350px) {
.edcar_letter{
font-size:120px;
}
}
Sospecho que la palabra clave onlypuede ser el problema aquí. No tengo problemas para utilizar consultas de medios como esta:
@media screen and (max-width: 480px) { }
Usé bootstrap en un sitio de prensa pero no funcionó en IE8, usé css3-mediaqueries.js javascript pero todavía no funciona. Si desea que su consulta de medios funcione con este archivo javascript, agregue la pantalla a su línea de consulta de medios en CSS
Aquí hay un ejemplo :
<meta name="viewport" content="width=device-width" />
<style>
@media screen and (max-width:900px) {}
@media screen and (min-width:900px) and (max-width:1200px) {}
@media screen and (min-width:1200px) {}
</style>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>
Línea de enlace CSS tan simple como la línea anterior.
