¡Buen dia amigos!
Le presento la traducción de una breve nota, "Cómo obtener los tamaños de pantalla, ventana y página web en JavaScript" de Dmitri Pavlutin.
Para determinar la orientación de la ventana del navegador (horizontal o vertical), puede comparar su ancho y alto.
Sin embargo, es fácil confundirse con todo tipo de tamaños disponibles: hay tamaños de pantalla, tamaños de ventana, páginas web, etc.
¿Qué significan estos tamaños y, lo más importante, cómo obtenerlos? De eso es de lo que te voy a hablar.
1. pantalla
1.1. Tamaño de pantalla
El tamaño de la pantalla es el ancho y la altura de toda la pantalla: monitor o pantalla móvil.
Puede obtener información sobre el tamaño de la pantalla utilizando la
screenpropiedad del objeto window:
const screenWidth = window.screen.width
const screenHeight = window.screen.height
1.2. Tamaño de pantalla disponible
El tamaño de pantalla disponible es el ancho y la altura de la pantalla activa sin la barra de herramientas del sistema operativo.
Para obtener el tamaño de pantalla disponible, consulte nuevamente
window.screen:
const availableScreenWidth = window.screen.availWidth
const availableScreenHeight = window.screen.availHeight
2. ventana
2.1. Tamaño de la ventana exterior (o tamaño de la ventana exterior)
El tamaño de la ventana externa es el ancho y la altura de la ventana actual del navegador, incluida la barra de direcciones, la barra de pestañas y otros paneles del navegador.
Puede obtener información sobre el tamaño de la ventana externa utilizando propiedades
outerWidthy un outerHeightobjeto window:
const windowOuterWidth = window.outerWidth
const windowOuterHeight = window.outerHeight
2.2. Tamaño de la ventana interior (o tamaño de la ventana interior)
El tamaño interno de la ventana es el ancho y alto de la ventana gráfica (ventana gráfica).
El objeto
windowproporciona propiedades innerWidthy innerHeight:
const windowInnerWidth = window.innerWidth
const windowInnerHeight = window.innerHeight
Si queremos obtener el tamaño interno de la ventana sin barras de desplazamiento, hacemos lo siguiente:
const windowInnerWidth = document.documentElement.clientWidth
const windowInnerHeight = document.documentElement.clientHeight
3. Tamaño de la página web
El tamaño de la página web es el ancho y alto del contenido mostrado (contenido representado).
Use lo siguiente para obtener el tamaño de una página web (incluye relleno de página, pero excluye bordes, relleno y barras de desplazamiento):
const pageWidth = document.documentElement.scrollWidth
const pageHeight = document.documentElement.scrollHeight
Si es
pageHeightmayor que la altura interna de la ventana, entonces hay una barra de desplazamiento vertical.
4. Conclusión
Espero que ahora entiendas cómo obtener diferentes tamaños.
El tamaño de la pantalla es el tamaño del monitor (o pantalla) y el tamaño de la pantalla disponible es el tamaño de la pantalla sin las barras de herramientas del sistema operativo.
El tamaño de la ventana externa es el tamaño de la ventana activa del navegador (incluida la barra de búsqueda, la barra de pestañas, las barras laterales abiertas, etc.), y el tamaño de la ventana interna es el tamaño de la ventana gráfica.
Finalmente, el tamaño de la página web es el tamaño del contenido.
¡Gracias por su atención, amigos!