sé que con $ (ventana) .width() puede obtener el tamaño del navegador web.detectar automáticamente el cambio de ancho de ventana del navegador web?
Quiero detectar cuando el usuario cambia el tamaño de su navegador web para que pueda reajustar el ancho de las columnas. ¿Hay alguna manera de detectar esto automáticamente o tengo que usar setTimeinterval para repetir y ver si ha cambiado?
Prueba el resize event
$(window).resize(function() {
console.log('window was resized');
});
El evento JavaScript es nombrado window.onresize. La unión
El jQuery es nombrado .resize()
Algo para tener en mente en el IE, al menos, cambiar el tamaño de la burbuja eventos, y elementos de posicionado y el cuerpo del documento puede disparar eventos de cambio de tamaño independientes.
Además, IE desencadena un flujo continuo de eventos 'resize' cuando la ventana o elemento se cambia de tamaño arrastrando. Los otros navegadores esperan a que el mouseup se dispare.
IE es un reproductor lo suficientemente grande como para que sea útil contar con un controlador intermedio que cambie el tamaño de los eventos, incluso si solo le ramifica clientes IE.
El controlador ie establece un tiempo de espera corto (100-200 msec) antes de llamar al controlador de cambio de tamaño "real". Si se vuelve a llamar a la misma función antes del tiempo de espera, es un evento bubblng o la ventana se está arrastrando a un nuevo tamaño, por lo que borre el tiempo de espera y vuelva a configurarlo.
En MDN que dan una muy buena código Javascript independiente:
window.onresize = resize;
function resize()
{
alert("resize event detected!");
}Si necesita simplemente este tipo de funcionalidad que recomendaría a ir a por ello.
utilizo media = "única pantalla y (min-width: 750px)" href = "... archivos CSS para ventanas anchas" = " medios de comunicación única y de pantalla (max-width: 751px)" href = "... archivo css para móviles"
Cuando muevo el borde derecho de la ventana hacia la izquierda y hacia la derecha para aumentar y disminuir el tamaño de mi ventana, mi navegador cambiará automáticamente de la ventana ancha al móvil. No es necesario que incluya ningún código JavaScript para detectar el ancho de la ventana. Esto funciona para Chrome, Firefox e Internet Explorer en computadoras Windows y Macintosh.
escribiendo esto causa alguna manera ninguna de estas respuestas dan la forma de mejores prácticas modernas de hacer esto:
window.addEventListener("resize", function(event) {
console.log(document.body.clientWidth + ' wide by ' + document.body.clientHeight+' high');
})
Es posible que desee utilizar debounce: https://davidwalsh.name/javascript-debounce-function
lo contrario, el
window.addEventListener("resize")
Se disparará todo el tiempo ya que el tamaño de la ventana está en progreso. que gravará la sobrecarga de tu CPU.
Esto también se activa con el zoom de los navegadores móviles, debería haber una opción para verificar manualmente los tamaños con respecto a un valor anterior. – Hoffmann
Pero esto no es exactamente lo que se preguntó (o lo que estoy buscando). Si, por ejemplo, descarga un archivo en Chrome, aparecerá la barra de "descargas" en la parte inferior de la página, cambiando la altura de su navegador y activando correctamente el evento de cambio de tamaño. Eso no es un cambio de ancho, por lo que obtienes un evento que necesitas filtrar (que es lo que estoy buscando ...) – philw