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

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Algunos artículos que te pueden interesar

La API Battery (Batería) en HTML5

La API Battery (Batería) en HTML5

La API de la batería en JavaScript provee información sobre el nivel de carga actual del dispositivo.

Andrés Cruz 17-11-2014

La API de Reconocimiento de Voz en JavaScript: speechRecognition()

La API de Reconocimiento de Voz en JavaScript: speechRecognition()

La API de Reconocimiento de Voz da la capacidad a nuestras aplicaciones de reconocer la voz según el idioma configurado a través del micrófono de la PC o dispositivo móvil.

Andrés Cruz 10-10-2017

Los mejores plugin WYSIWYG para JavaScript

Los mejores plugin WYSIWYG para JavaScript

Se presentan algunos plugins gratuitos WYSIWYG para JavaScript que no son más que una interfaz que permite dar formato al texto introducido mediante HTML; en esencia permite enriquecer el texto introducido mediante un procesador de texto.

Andrés Cruz 28-03-2016