Calcular resolución de pantalla (ancho y alto) con JavaScript

En ocasiones puede interesarnos conocer la resolución de pantalla del usuario que está visitando una página web para optimizarla en base al tamaño desde donde se va a ver. Actualmente es bastante común usar frameworks que nos ayudan precisamente a esta tarea, sobre todo cuando estamos haciendo una versión responsive de una plantilla. Nosotros vamos a ver cómo sacar estos valores directamente con JavaScript utilizando las propiedades screen.width y screen.height.

La propiedad screen.width calculará y nos devolverá en píxeles el ancho de pantalla, mientras que screen.height hará lo mismo pero con el alto. Ambas podemos usarlas conjuntamente o por separado, según necesitemos.

document.write("Resolución: " + screen.width + "x" + screen.height + "px");

Su uso es bastante sencillo, en el ejemplo anterior imprimimos en pantalla directamente el valor con un document.write, aunque lo normal será que no lo uses de un modo visible para el usuario claro, sino para hacer cálculos internos.