Cargando condicionalmente JavaScript en un diseño receptivo

Question

Estoy tratando de hacer algo que creo que debería ser bastante sencillo, pero no he encontrado una explicación directa de la solución.

Estoy creando un sitio web receptivo que es móvil primero (ancho de 320 px como predeterminado). En esa pequeña resolución, el sitio es una columna y estoy feliz de permitir que cada "caja" individual se expanda o se contraiga a la altura natural del contenido contenido en el interior.

Sin embargo, en resoluciones más grandes donde el sitio se expande a tres columnas, quiero agregar una pequeña función de JavaScript para igualar las alturas de las cajas de cada columna. La función de la que estoy hablando sería algo como esto:

    jQuery(document).ready(function() {
    setHeight('#inner-footer .widget-area');
});

var maxHeight = 0;
function setHeight(column) {
    //Get all the element with class = col
    column = $(column);
    //Loop all the column
    column.each(function() {       
        //Store the highest value
        if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
        }
    });
    //Set the height
    column.height(maxHeight);
}

He encontrado diferentes formas de hacer de lo que estoy hablando.

1. Puedo usar la función de "carga" modernizr (formalmente yesnope.js).
2. Uso de una función personalizada que incorpora la función "isMedia" de Nicholas Zakas como se describe en este enlace JavaScript específico de medios o
3. una función JavaScript personalizada utilizando la variable "Survalwidth" como en
   var screenWidth = (screen.width < 768) ? true : false;
   Como se describe en Consultas de los medios en el mundo real

Con mi conocimiento limitado de JavaScript, no he podido escribir el código para que cualquiera de estos enfoques funcione para mi script. ¿Puede alguien ayudarme aquí?

No tengo preferencia particular por el enfoque, solo quiero que funcione con navegador cruzado, etc. Mi sentido es que el modernizr El enfoque es la forma más robusta y estable de hacer que esto funcione en el mayor número de casos de uso, pero no estoy totalmente seguro de eso. Nunca he modificado Modernizr, así que no estoy seguro de cómo escribir y dónde colocar la función de carga personalizada.

¿Alguien tiene pensamientos y código específico para el enfoque Modernizr o cualquiera de las otras soluciones (o algo más)? Aprecio mucho la ayuda.

Answer 1

Modernizr puede verificar que las consultas de medios se aplican con la función Modernizr.mq ()

Pasas tu consulta de medios que quieres que coincida así

if(Modernizr.mq('all and (min-width: 768px)')) {
    // Equal height code here
}

Aquí una vez que el ancho mínimo pase 768px, se llamaría el código dentro de la función, por lo que para usted el código de igual altura.

Answer 2

Puede intentar hacer uso de MatchMedia, esto le permitirá cargar JS específicos según las consultas de los medios.

https://developer.mozilla.org/en/dom/window.matchmedia

Paul Irish ha estado trabajando en algunos polyfills

https://github.com/paulirish/matchmedia.js/

Espero que esto ayude

Ian