JavaScript es una tecnologías fantástica que permite realizar muchas operaciones, entre ellas, calcular el ancho y alto de nuestra pantalla, en otras palabras, la resolución de pantalla.
Todo este procesamiento se realiza mediante el objeto screen, el cual permite obtener la resolución de la pantalla además de todo lo relacionado con la pantalla:
Existen diversas razones que se nos pueden presentar para querer obtener la resolución de la pantalla; disposición de los contenidos, información hacia el usuario, emplearlo en conjunto para realizar un overlay, etc. En esta entrada veremos cómo obtener la resolución de una pantalla con JavaScript nativo.
Obteniendo el ancho y largo de una pantalla (screen)
Como podemos ver en la siguiente figura, el objeto screen está compuesto de varios métodos y atributos.
Pero, en este artículo nuestro interés en ver ¿Cómo obtener la resolución de pantalla?
Con las siguientes líneas de código:
screen.width;
screen.height;De esta forma podemos obtener la resolución en pixeles de la pantalla compuesta por los componentes screen.width y screen.height (ancho y largo) de dispositivos como monitores, teléfonos, tablets, entre muchos otros.
Obtenemos la resolución de la pantalla del dispositivo.
Además de esto, contamos con otros dos métodos que nos permiten obtener la resolución del dispositivo sin contar con otros elementos o mejor dicho, interfaces como la barra de tareas de Windows, etc; es decir; el espacio disponible para mostrar el navegador web.
screen.availWidth; screen.availHeight;
Ejemplos de cómo obtener la resolución de pantalla con JavaScript
document.getElementById("widthYheight").innerHTML = "Mi resolución de pantalla es: "+screen.width + " px por "+screen.height;
document.getElementById("availwidthYavailheight").innerHTML = "El ancho y alto de mi pantalla para mi navegador web es: "+screen.availWidth + " px por "+screen.availHeight;Detectar cambio de tamaño de ventana con JavaScript
Ya teniendo claro cómo obtener la resolución de la pantalla (completa de nuestra PC) mediante el objeto screen en JavaScript, otro escenario posible que se te pueda presentar es cómo saber cuando se redimensiona la ventana de nuestro navegador y cual es la resolución o ancho/alto de la ventana del navegador; para lo primero en la API de JavaScript existe el evento onresize:
<body onresize="FuntionResize()">La cual se ejecuta cada vez que se redimensiona el navegador; para saber cuánto espacio en píxeles está ocupando la ventana del navegador tenemos las propiedades outerWidth y outerHeight provisto mediante el objeto window:
function FuntionResize() {
var widthBrowser = window.outerWidth;
var heightBrowser = window.outerHeight;
console.log("Tamaño de la pantalla del navegador: width=" + widthBrowser + ", height=" + heightBrowser);
}Detectar cambio de resolución con jQuery
jQuery es una librería que nos da un plus al momento de desarrollar nuestras aplicaciones; es ampliamente utilizado y es posible que el sitio que desarrollamos empleen esta tecnología; para saber cómo detectar el tamaño de la ventana cada vez que se redimensiona el navegador tenemos que:
$(window).resize(function() {
var widthBrowser =$(window).height();
var heightBrowser =$(window).width();
console.log("Tamaño de la pantalla del navegador: width="+widthBrowser +" height="+heightBrowser );
});
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter