Cómo detectar el tamaño de la ventana y luego hacer algo con la declaración del interruptor jquery

if window width jquery

Question

Me gustaría comprobar el tamaño de la ventana con jquery y, según las diferentes resoluciones, me gustaría cambiar la imagen de fondo. Así que estaba pensando en usar de alguna manera la declaración de "cambio" para más casos, pero simplemente no sé cómo se vería esto. Esta es la estructura básica que quiero pero con más opciones:

if ((screen.width>=1024) && (screen.height>=768)) {
 //do something
}
else {
//do something else
}

Gracias por tu ayuda.

Answer 1

Deberías usar:

$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

$(window).height();   // returns heightof browser viewport
$(document).height(); // returns height of HTML document

y luego podrías hacer:

var width = $(window).width(); 
var height = $(window).height(); 

if ((width >= 1024  ) && (height>=768)) {
 //do something
}
else {
//do something else
}

EDITAR: no creo que usar una declaración de cambio sea útil en este caso. La instrucción switch es solo una forma alternativa para la notación if ... else que en este caso me resulta más útil porque tienes que hacer una comparación múltiple:

if ((width >= 1280) && (height>=1024)) {
 //do something
}
else if ((width >= 1024  ) && (height>=768)){
//do something else
} else if ((width >= 800) && (height>=600)){
//do something else
}else{
//do something else
}

Answer 2

La declaración de switch no le permitirá hacer cosas como verificar números entre ciertos valores, y no le permitirá verificar múltiples variables, ya sea ...

Entonces, para este escenario en particular, creo que la mejor opción es simplemente una lista de declaraciones if-elseif , como si ya estuvieras en camino a hacerlo.

Para hacer "verificaciones de rango" en el switch es realmente detallado:

switch(windowWidth) {
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
        //Do something if value is less than or equal to 5
        break;
    case 6:
    case 7:
    case 8:
    case 9:
    case 10:
        //Do something if value is higher than 5 AND less than or equal to 10
        break;
    ...
    ...
}