Cómo detectar la resolución de pantalla del usuario con JavaScript
JavaScript es uno de los lenguajes imprescindibles en Desarrollo Web y una excelente opción como primer lenguaje para iniciarse en la programación, así que nunca está de más repasar todo lo que nos permite, como estamos viendo en los numerosos tutoriales y artículos prácticos que publicamos en este blog y que podrás encontrar en la sección de Programación. Hoy repasamos en una de sus posibilidades que nos ayudarán a mejorar la usabilidad y Experiencia de Usuario al crear una página web básica: averiguar la resolución de la pantalla del usuario que accede a nuestra página web. Esto podemos hacerlo con el objeto Screen. El objeto Screen nos mostrará valores como 800×600, 1024×768, 1280×720 (HD Ready), 1366×768, 1920×1080 (FullHD), incluso superiores como 2048×1080 (2K) o 3840×2160 (4K), que son resoluciones que configura el propio usuario (siempre que la tarjeta gráfica lo soporte) en las propiedades de pantalla, dentro del panel de control del sistema. En el caso de los dispositivos móviles como teléfonos o tablets, la configuración viene predeterminada habitualmente por el fabricante.
El objeto Screen (window.screen)
El objeto Screen tiene dependencia del objeto Window, goza dos propiedades: alto y ancho, y se puede utilizar de la siguiente forma:
- width nos indica el ancho en pixels de la resolución de la pantalla.
- height nos indica el alto en pixels de la resolución de la pantalla.
Visto esto, para tener acceso a un objeto dependiente de window, no será necesario mencionarlo expresamente, por lo que window.screen.width, equivale a poner screen.width.
Si queremos ver los valores que tiene el usuario en cuanto alto y ancho de resolución pantalla, podríamos utilizar el siguiente script:
<script>
alert('La resolución de pantalla que tienes en este momento es de: ' + screen.width + ' x ' + screen.height)
</script>
Podríamos también utilizar una estructura if para mostrar cosas diferentes. Por ejemplo, en el caso de que se cumplan ciertas condiciones de la resolución, mostraremos por pantalla unos textos:
<p>
La resolución actual que tienes en pantalla es:
<script>
if (screen.width < 1024)
document.write ('Insuficiente')
else
if (screen.width < 1280)
document.write ('Suficiente')
else
document.write ('Óptima')
</script>
</p>
Lo que estamos diciendo en el código es que, si la ventana es inferior a 1024 píxeles de ancho, que muestre en pantalla Insuficiente, si supera los 1024 píxeles de ancho y es menor a 1280 píxeles de ancho, que muestre el texto Suficiente y si es mayor a 1280 píxeles de ancho, que ponga en pantalla Óptima.Tenemos que aclarar que el uso del método document.write() de JavaScript no se considera una buena práctica, por lo que debemos tomarlo como un simple ejemplo didáctico.
Sin embargo, sí podremos utilizar, sin ningún problema, la propiedad window.screen en cualquier navegador, ya sea antiguo, nuevo e incluso en dispositivos móviles y tablets.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.