Pregunta Ejecución opcional de JavaScript basada en consultas de medios


Estoy intentando descubrir cómo puedo ejecutar opcionalmente un bloque de Javascript basado en la consulta actual del dispositivo / medio. Estoy usando Twitter Bootstrap y tengo esencialmente dos versiones de consultas de medios:

@media (min-width: 980px) { ... } <!-- Desktops -->
@media (max-width: 979px) { ... } <!-- Smaller screens/tablets/phones -->

Tengo un mapa que genero, pero no lo estoy mostrando en las razones de ancho de banda / móvil / versión de pantalla pequeña. Sin embargo, el javascript todavía se ejecuta en segundo plano, aunque no se puede ver en la pantalla del móvil. Por lo tanto, estoy tratando de encontrar una forma en JavaScript donde pueda hacer algo como:

// Imaginary function
var screenType = getScreenType();

if(screenType == 1) {
   // Load map
}

He leer acerca de personas configurando propiedades de CSS para valores específicos en sus consultas de medios y luego tratando de encontrar ese elemento en el DOM en función de la propiedad de CSS, pero tiene que haber una mejor manera. ¿Algunas ideas?


9
2017-10-22 16:31


origen


Respuestas:


¿Qué le parece usar javascript para eso?

<script type="text/javascript">

if (screen.width < 980) { 

document.write('<link href="UrLowRes.css" type="text/css" rel="stylesheet"/>');

} else { 

document.write('<link href="UrlHighRes.css" type="text/css" rel="stylesheet"/>');

} 

</script>

3
2017-10-22 16:33



La respuesta aceptada actual no es lo suficientemente buena, debe verificar window.matchMedia

Puede detectar cambios en la dimensión de la ventana gráfica, pero debe calcular factores como la orientación y la relación de aspecto, y no hay garantía de que nuestro cálculo coincida con las suposiciones de nuestro navegador cuando aplique las reglas de consulta de medios.

Quiero decir, puedes calcular X, pero la suposición de tu navegador puede ser Y. Así que creo que es mejor usar las mismas reglas del navegador, y window.matchMedia lo hace

var jmediaquery = window.matchMedia( "(min-width: 480px)" )
if (jmediaquery.matches) {
    // window width is at least 480px
}
else {
    // window width is less than 480px
}

Incluso puede recibir una notificación de consulta utilizando un oyente

var jmediaquery = window.matchMedia("(orientation: portrait)");
jmediaquery.addListener(handleOrientationChange);
handleOrientationChange(jmediaquery);

function handleOrientationChange(jmediaquery) {
    if (jmediaquery.matches) {
        // orientation changed
    }
}

Si ya no necesita recibir notificaciones sobre cambios, simplemente llame a removeListener ()

jmediaquery.removeListener(handleOrientationChange);

17
2017-08-11 16:55



Es posible que encuentre útil la biblioteca Enquire.js:

http://wickynilliams.github.com/enquire.js/

Artículo de CSS-Tricks: http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/


10
2017-10-22 16:40



También puedes usar un complemento llamado minwidth:

minwidth(940, function () {
  //do whatever you need
});

Pero solo funciona cuando la página no se carga al redimensionar ...

http://edenspiekermann.com/en/blog/responsive-javascript-helpers


1
2017-10-22 16:38