Comportamiento esperado:
setInterval llama a getScreenWidth() cada 2 segundos.getScreenWidth() obtiene el ancho actual de la pantalla (navegador).Producción:
"1536"La salida es siempre un valor constante. (en mi caso 1536)
Estaba probando este código en CodePen, y lo intenté:
El HTML:
<div id="demo"></div>La secuencia de comandos:
"use strict"; console.clear(); function getScreenWidth() { return screen.availWidth; // I've also tried screen.width } const demo = document.getElementById("demo"); let count = 0; const intervalId = setInterval(function () { demo.innerHTML = getScreenWidth(); console.clear(); console.log(demo.innerHTML); console.log(count); count++; if (count > 30) { clearInterval(intervalId); } }, 2000); Dado que setInterval está llamando indirectamente a getScreenWidth() cada 2 segundos, ¿no debería screen.width ser un valor nuevo cada vez?
Si asumo que es un valor nuevo, ¿significa que screen.width no es igual al ancho actual de la ventana del navegador?
Nota: La variable de count en el código es solo para evitar que setInterval ejecute indefinidamente en segundo plano.
Tengo el mismo ancho de pantalla :)
De todos modos, no necesita setInterval , puede cambiarlo cada vez que se cambia el tamaño del navegador usando el evento onresize de la ventana:
window.onresize = function() { screen.width; // 1536 / 1530 etc. }; Tampoco puede obtener el ancho del navegador (con screen.width )
Pero puede obtenerlo fácilmente usando la función .width() de jQuery:
$(window).width();Aquí hay un ejemplo de trabajo (usando jQuery):
"use strict"; console.clear(); function getScreenWidth() { return $(window).width(); } const demo = document.getElementById("demo"); window.onresize = function() { demo.textContent = getScreenWidth(); console.clear(); console.log(demo.textContent); }; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="demo"></div>Editar: tampoco puede cambiar el tamaño de la ventana del navegador con JavaScript. Esto sería un gran problema de seguridad, y debería estar contento de que no sea posible.
La interfaz de pantalla representa una pantalla, generalmente aquella en la que se representa la ventana actual, y se obtiene mediante window.screen.
Por lo tanto, el objeto de pantalla aquí representa la pantalla de salida del dispositivo y no la ventana del navegador.
Nuevamente, de MDN :
La propiedad de solo lectura Screen.width devuelve el ancho de la pantalla en píxeles.
Por lo tanto, screen.width (o window.screen.width ) no nos da el ancho de la ventana del navegador, sino el ancho de la pantalla (pantalla de salida del dispositivo), que obviamente no cambiaría.
Para obtener el ancho de la ventana del navegador, necesitamos usar Element.clientWidth .
De MDN una vez más:
La propiedad Element.clientWidth es cero para elementos en línea y elementos sin CSS; de lo contrario, es el ancho interior de un elemento en píxeles. Incluye relleno pero excluye bordes, márgenes y barras de desplazamiento verticales (si están presentes).
Cuando clientWidth se usa en el elemento raíz (el elemento) (o si el documento está en modo peculiar), se devuelve el ancho de la ventana gráfica (excluyendo cualquier barra de desplazamiento).
Simplemente cambiando getScreenWidth() haría:
function getScreenWidth() { return document.body.clientWidth; }Ahora la salida de la consola cambia cuando cambia el ancho de la ventana del navegador.