Puede haber ocasiones en las que su aplicación JavaScript necesite saber qué tamaño de pantalla necesita para poder realizar determinadas acciones.
Afortunadamente para nosotros, hay funciones JavaScript integradas que pueden capturar fácilmente diferentes dimensiones de la pantalla en el dispositivo del usuario en píxeles. Lo que use depende de lo que le gustaría hacer.
Obtener la resolución del usuario
Es posible que desee hacer algo relacionado con la resolución del dispositivo del usuario. En este caso, debe utilizar las propiedades screen.widthy las incorporadas screen.height. Estos le dan el tamaño de la pantalla con la que está tratando.
Esta no es el área con la que tiene que trabajar en la página .T valores stos representan la totalidad de la pantalla , que es la resolución de pantalla del usuario.
Obtener el tamaño del navegador
Puede haber una aplicación interesante para lidiar con el tamaño actual del navegador. Si necesita acceder a estas dimensiones, use las propiedades screen.availWidthy screen.availHeightpara hacerlo.
Recuerde, estas son las dimensiones de toda la ventana del navegador, desde la parte superior de la ventana del navegador hasta donde el navegador se encuentra con una barra de tareas o el borde de su escritorio, según su configuración.
Una nota interesante :screen.availHeighttambién se puede utilizar para calcular la altura de una barra de tareas en una computadora. Si la resolución de su navegador es1366 x 768, porejemplo, escreen.availHeightinforma 728 píxeles, entonces su barra de tareas tiene 40 píxeles de alto. También puede calcular la altura de la barra de tareas restandoscreen.heightyscreen.availHeight:
var taskbarHeight = parseInt(screen.height,10) - parseInt(screen.availHeight,10) + " pixels"; /* For a user that has a screen resolution of 1366 x 768 pixels, their taskbar is likely 40 pixels if using Windows 10 with no added accessibility features. */Obtener el tamaño de la ventana de visualización
Estas propiedades son interesantes y se pueden usar para crear algunos efectos ingeniosos. Puede usar window.innerHeighty window.innerWidthpara obtener el tamaño de la ventana de la página web tal como la ve el usuario.
Tenga en cuenta que estos valores no son estáticos y cambiarán dependiendo de lo que esté sucediendo con el navegador. En otras palabras, si el navegador en sí es pequeño, estos valores serán más pequeños, y si el navegador está maximizado, serán más grandes.
Si, por ejemplo, está trabajando en Google Chrome y abre la consola (debe estar acoplada a un lado de la ventana), window.innerHeightcambiará para reflejar la altura de la consola porque parte de la ventana estará bloqueada.
Puede probar esto llamando window.innerHeight, tomando nota del valor, luego aumentando el tamaño de la consola y window.innerHeightvolviendo a llamar .
Estas propiedades también cambiarán si su navegador se maximiza o cambia de tamaño de alguna manera. En el tamaño máximo de un navegador, la propiedad window.innerWidthes la misma que ambos screen.widthy screen.availWidth(a menos que haya una barra de tareas en el lateral, en cuyo caso screen.availWidthno será igual). window.innerHeightes igual a la cantidad de área en la ventana de la propia página (el área de la página web).
Obtener alto y ancho de la página web
Si necesita ver qué tan alto o ancho es realmente su página web, existen propiedades para tomar estas dimensiones: document.body.offsetWidthy document.body.offsetHeight.
Estas propiedades representan el tamaño del contenido en el cuerpo de la página. Una página sin contenido tiene un valor document.body.offsetHeightcercano al mismo que window.innerHeightdepende de los márgenes / relleno que se establezcan en el cuerpo del documento. Si los márgenes y el relleno están configurados 0en el elemento raíz html y el cuerpo del documento, entonces document.body.offsetHeighty window.innerHeightserá igual sin contenido.
Estas propiedades se pueden utilizar para interactuar con su página / aplicación dependiendo de lo que desee hacer.