Las consultas de medios de CSS3 no funcionan

Recientemente he estado desarrollando una versión móvil para un sitio web, y simplemente quiero poder cambiar el archivo CSS si se detecta que el navegador está en un dispositivo móvil. Puede ver mis intentos anteriores here, pero ahora he decidido que la forma más factible de hacerlo es centrarse en consultas de medios.Las consultas de medios de CSS3 no funcionan

El problema que tengo aquí es que las consultas de los medios simplemente no funcionan en absoluto. Siempre carga la hoja de estilos predeterminada. Aquí está el código que tengo:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
<link href="../css/style.css" id="stylesheet" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="../css/style_mob.css" />

¿He perdido algo con este código? He intentado utilizar los muchos tutoriales que se ofrecen para esto, pero ninguno parece ayudarme. Realmente llegué a un callejón sin salida aquí por lo que cualquier ayuda sería apreciada enormemente.

Fuente

2011-04-11 Liam Spencer

La hoja de estilo predeterminada no tiene ningún atributo que impida que se cargue.

Se podría darle media="screen and (min-width: 481px)", pero que llevaría al peligro, que los navegadores antiguos no se carga tampoco.

por lo general es mejor, tener la carga de estilo por defecto y sólo asegúrese de que la hoja de estilo móvil prevalece sobre cualquier cosa que no necesita de la hoja de estilo por defecto.

Fuente

2011-04-11 09:23:47 RoToRa

Gracias por la respuesta. Eso ciertamente ayuda. El problema aquí es que el archivo CSS predeterminado es muy grande, así que tendría que pasar por todos los estilos y sobrescribirlo basmaticalmente para quitarlo. La hoja de estilo móvil no tiene muchos elementos de estilo, por lo que decidí hacer uno desde cero. ¡Supongo que si tuviera que superar todo lo demás, eso simplemente tendría que hacer! –

Puede probar navegadores antiguos usando la consulta de medios para la hoja de estilos predeterminada. La mayoría lo cargará porque comienza con 'pantalla'. Si encuentra un navegador específico que no lo carga, pero debe admitirlo, puede haber alternativas. – RoToRa

Parece que estoy cerca de una solución funcional gracias a su ayuda. Tengo una consulta sin embargo. Tuve que usar algunos condicionales de CSS para asegurarme de que se cargue una hoja de estilo con los navegadores IE. Esto plantea la pregunta de cómo se mostraría esta página para, digamos, versiones anteriores de Firefox que no son compatibles con CSS3. –

Completando el condicional con min-device-width trabajó para mí en IOS. Tenga en cuenta la palabra dispositivo. Funcionó bien en Android, incluso sin la palabra dispositivo, sin embargo.

Fuente

2012-07-23 14:30:21 Moriz

he usado de arranque en un sitio de prensa, pero que no trabajaron en IE8, yo solía CSS3 mediaqueries.js javascript pero aún no funciona. si desea que su consulta de medios para trabajar con este archivo javascript añadir pantalla para su consulta en línea de los medios de comunicación css

aquí es un ejemplo:

<meta name="viewport" content="width=device-width" /> 
<script type="text/javascript" src="css3-mediaqueries.js"></script> 

<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">

css línea de Enlace tan simple como encima de la línea.

Fuente

2013-08-31 10:12:31 user1290329

Si tiene initial-scale=1.0 y maximum-scale=1.0, entonces es un poco redundante tener user-scalable=0 también. Tener el ajuste de escala máxima en la escala inicial igual significa que el usuario no puede acercarse en absoluto porque comienza con el zoom máximo.

Fuente

2014-02-18 14:12:50 TylerH

Las consultas de medios de CSS3 no funcionan

Respuesta

Cuestiones relacionadas