DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
04-08-2014

El objeto screen permite obtener la resolución de la pantalla además de todo lo relacionado con el mismo:

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 como 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 esta 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?

objeto screen javascript

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

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;

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Calendario de cubo

Calendario de cubo

Esfera de agrupación

Esfera de agrupación

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Algunos artículos que te pueden interesar

Cómo crear anillos de circulos en JavaScript y Canvas

Cómo crear anillos de circulos en JavaScript y Canvas

En esta entrada veremos cómo crear un sistema sencillo de anillos de círculos con Canvas y JavaScript; para esto se hará uso de la función requestAnimationFrame() y animar el Canvas.

Andrés Cruz 16-11-2015

Escalado y recortando imágenes con Canvas

Escalado y recortando imágenes con Canvas

Con Canvas es posible escalar e incluso recortar imágenes dibujadas en el lienzo (en el Canvas) todo con sólo una función llamada drawImage().

Andrés Cruz 05-05-2014

¿Cómo usar y configurar un ajax con jQuery?

¿Cómo usar y configurar un ajax con jQuery?

AJAX es una tecnología que permite crear aplicaciones que mantienen una comunicación asíncrona con el servidor.

Andrés Cruz 28-08-2014