javascript - saber - tamaño de la ventana del navegador

Obtenga el tamaño de la pantalla, la página web actual y la ventana del navegador (17)

¿Cómo puedo obtener windowWidth , windowHeight , pageWidth , pageHeight , screenWidth , screenHeight , pageX , pageY , screenX , screenY que funcionará en todos los navegadores principales?

¡Aquí está mi solución!

// innerWidth const screen_viewport_inner = () => { let w = window, i = `inner`; if (!(`innerWidth` in window)) { i = `client`; w = document.documentElement || document.body; } return { width: w[`${i}Width`], height: w[`${i}Height`] } }; // outerWidth const screen_viewport_outer = () => { let w = window, o = `outer`; if (!(`outerWidth` in window)) { o = `client`; w = document.documentElement || document.body; } return { width: w[`${o}Width`], height: w[`${o}Height`] } }; // style const console_color = ` color: rgba(0,255,0,0.7); font-size: 1.5rem; border: 1px solid red; `; // testing const test = () => { let i_obj = screen_viewport_inner(); console.log(`%c screen_viewport_inner = /n`, console_color, JSON.stringify(i_obj, null, 4)); let o_obj = screen_viewport_outer(); console.log(`%c screen_viewport_outer = /n`, console_color, JSON.stringify(o_obj, null, 4)); }; // IIFE (() => { test(); })();

A veces es necesario ver los cambios de ancho / alto al cambiar el tamaño de la ventana y el contenido interno.

Para eso he escrito un pequeño script que agrega un cuadro de registro que monitorea dinámicamente todo el cambio de tamaño y se actualiza casi de inmediato.

Agrega un HTML válido con una posición fija y un alto índice z, pero es lo suficientemente pequeño, por lo que puede :

usarlo en un sitio real
Úsalo para probar vistas móviles / receptivas

Probado en: Chrome 40, IE11, pero también es muy posible trabajar en otros navegadores más antiguos ... :)

EDITAR: Ahora los estilos se aplican solo al elemento de tabla del registrador, no a todas las tablas, también se trata de una solución sin jQuery :)

Ahora podemos usar de forma segura la API nativa de la ventana de JavaScript en todos los navegadores , sin el contexto de la ventana.

¡La sintaxis es bastante clara!

n = "<i>px</i><br>" /* separator */ dp = devicePixelRatio /* device zoom level */ body = (() => { document.body.innerHTML = /* ready! */ "Device zoom level: " + dp +n+ "Screen width: " + screen.width *dp+n+ "Screen height: "+ screen.height *dp+n+ "Document frame height: " + innerHeight *dp+n+ "Document frame width: " + innerWidth *dp+n+ "Parent document height: "+ outerHeight *dp+n+ "Parent document width: "+ outerWidth *dp+n+ "Window available height: "+ screen.availHeight *dp+n+ "Window available width: "+ screen.availWidth *dp+n+ "Document frame max scrollable X: "+ scrollMaxX *dp+n+ "Document frame max scrollable Y: "+ scrollMaxY *dp+n+ "Distance from left screen to window: "+ screenX *dp+n+ "Distance from top screen to window: "+ screenY *dp+n })()

Para obtener resultados precisos en todos los navegadores y dispositivos, los resultados deben multiplicarse por el dispositivoPixelRatio .

La propiedad de la ventana devicePixelRatio devuelve la proporción de la resolución en píxeles físicos a la resolución en píxeles CSS para el dispositivo de visualización actual. Este valor también podría interpretarse como la proporción de tamaños de píxeles: el tamaño de un píxel CSS al tamaño de un píxel físico. En términos más simples, esto le dice al navegador cuántos píxeles reales de la pantalla deben usarse para dibujar un solo píxel CSS.
Esto es útil cuando se trata de la diferencia entre la representación en una pantalla estándar en comparación con una pantalla HiDPI o Retina, que utiliza más píxeles de la pantalla para dibujar los mismos objetos, lo que resulta en una imagen más nítida.
No hay forma de recibir notificaciones cuando se cambia este valor (lo que puede suceder, por ejemplo, si el usuario arrastra la ventana a una pantalla con una densidad de píxeles diferente). Como no hay devoluciones de llamada o eventos disponibles para detectar cambios en la densidad de píxeles, la única forma de hacerlo es verificar periódicamente el valor de devicePixelRatio para ver si ha cambiado. Simplemente no lo hagas muy a menudo, o impactarás el rendimiento.
https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

Aquí está mi solución. Primero va algún objeto de utilidad para trabajar con cookie.

/* Simple getter and setter for cookies */ (function(global){ function setCookie(cname, cvalue, exdays) { exdays = typeof exdays === ''undefined'' && 365; var d = new Date(); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); var expires = "expires="+d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split('';''); for(var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == '' '') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return undefined; } global.Cookie = { get: getCookie, set: setCookie }; })(window);

Entonces puedes hacer algo como ...

/* Detect screen width and height and save it to a cookie. We are later using it to resize the images accordingly. */ if( !Cookie.get(''screen_width'') || !Cookie.get(''screen_height'') || Cookie.get(''screen_width'') != screen.width || Cookie.get(''screen_height'') != screen.height ){ Cookie.set(''screen_width'', screen.width); Cookie.set(''screen_height'', screen.height); location.reload(); }

De esta manera, puede utilizar un idioma del lado del servidor para leer las cookies y obtener el tamaño de imagen exacto de la pantalla del usuario.

Aquí hay una solución de navegador cruzado con JavaScript puro ( w3schools.com/jsref/prop_win_innerheight.asp ):

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

Desarrollé una biblioteca para conocer el tamaño real de la ventana gráfica para los navegadores de escritorio y móviles, ya que los tamaños de la ventana gráfica son inconsistentes en todos los dispositivos y no pueden depender de todas las respuestas de esa publicación (según todas las investigaciones que realicé sobre esto): https://github.com/pyrsmk/W

En algunos casos relacionados con el diseño receptivo $(document).height() puede devolver datos incorrectos que muestran solo la altura del puerto de vista. Por ejemplo, cuando alguna envoltura div # tiene altura: 100%, ese #contenedor puede estirarse por algún bloque dentro de ella. Pero su altura todavía será como la altura de la ventana gráfica. En tal situación usted podría usar

$(''#wrapper'').get(0).scrollHeight

Eso representa el tamaño real de la envoltura.

Escribí un pequeño marcador de javascript que puedes usar para mostrar el tamaño. Puede agregarlo fácilmente a su navegador y cada vez que haga clic en él verá el tamaño en la esquina derecha de la ventana de su navegador.

Aquí encontrará información sobre cómo usar un marcador de marcadores https://en.wikipedia.org/wiki/Bookmarklet

Bookmarklet

javascript:(function(){!function(){var i,n,e;return n=function(){var n,e,t;return t="background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;",n=i(''<div style="''+t+''"></div>''),e=function(){return''<p style="margin:0;">width: ''+i(window).width()+" height: "+i(window).height()+"</p>"},n.html(e()),i("body").prepend(n),i(window).resize(function(){n.html(e())})},(i=window.jQuery)?(i=window.jQuery,n()):(e=document.createElement("script"),e.src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",e.onload=n,document.body.appendChild(e))}()}).call(this);

Codigo original

El código original está en el café:

(-> addWindowSize = ()-> style = ''background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;'' $windowSize = $(''<div style="'' + style + ''"></div>'') getWindowSize = -> ''<p style="margin:0;">width: '' + $(window).width() + '' height: '' + $(window).height() + ''</p>'' $windowSize.html getWindowSize() $(''body'').prepend $windowSize $(window).resize -> $windowSize.html getWindowSize() return if !($ = window.jQuery) # typeof jQuery==''undefined'' works too script = document.createElement(''script'') script.src = ''http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'' script.onload = addWindowSize document.body.appendChild script else $ = window.jQuery addWindowSize() )()

Básicamente, el código está anteponiendo una pequeña división que se actualiza cuando cambia el tamaño de su ventana.

Esto es todo lo que necesitas saber:

http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

pero en resumen:

var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName(''body'')[0], x = w.innerWidth || e.clientWidth || g.clientWidth, y = w.innerHeight|| e.clientHeight|| g.clientHeight; alert(x + '' × '' + y);

Fiddle

Para verificar la altura y el ancho de su página actual cargada de cualquier sitio web usando "consola" o después de hacer clic en "Inspeccionar" .

paso 1 : haga clic en el botón derecho del mouse y haga clic en ''Inspeccionar'' y luego haga clic en ''consola''

paso 2 : asegúrese de que la pantalla del navegador no esté en modo ''maximizar''. Si la pantalla del navegador está en el modo ''maximizar'', primero debe hacer clic en el botón maximizar (presente en la esquina superior derecha o izquierda) y anular su ampliación.

paso 3 : Ahora, escribe lo siguiente después del signo mayor que (''>''), es decir

> window.innerWidth output : your present window width in px (say 749) > window.innerHeight output : your present window height in px (say 359)

Pero cuando hablamos de pantallas de respuesta y si queremos manejarlo usando jQuery por alguna razón,

window.innerWidth, window.innerHeight

Da la medida correcta. Incluso elimina el espacio adicional de la barra de desplazamiento y no tenemos que preocuparnos por ajustar ese espacio :)

Puedes usar el objeto Screen para obtener esto.

El siguiente es un ejemplo de lo que devolvería:

Screen { availWidth: 1920, availHeight: 1040, width: 1920, height: 1080, colorDepth: 24, pixelDepth: 24, top: 414, left: 1920, availTop: 414, availLeft: 1920 }

Para obtener su variable screenWidth , solo use screen.width , lo mismo que con screenHeight , solo usaría screen.height .

Para obtener el ancho y el alto de su ventana, sería screen.availWidth o screen.availHeight respectivamente.

Para las variables pageX y pageY , use window.screenX or Y Tenga en cuenta que esto es de la PANTALLA MUY IZQUIERDA / SUPERIOR DE SU PANTALLA IZQUIERDA / SUPERIOR . Entonces, si tiene dos pantallas de ancho 1920 entonces una ventana de 500px desde la izquierda de la pantalla derecha tendría un valor de X de 2420 (1920 + 500). screen.width/height , sin embargo, muestra el ancho o la altura de la pantalla ACTUAL.

Para obtener el ancho y el alto de su página, use $(window).height() o $(window).width() .

Nuevamente utilizando jQuery, use $("html").offset().top y $("html").offset().left pageX para su pageX y los valores de pageY .

Si está utilizando jQuery, puede obtener el tamaño de la ventana o el documento utilizando los métodos de jQuery:

$(window).height(); // returns height of browser viewport $(document).height(); // returns height of HTML document (same as pageHeight in screenshot) $(window).width(); // returns width of browser viewport $(document).width(); // returns width of HTML document (same as pageWidth in screenshot)

Para el tamaño de la pantalla, puede utilizar el objeto de la screen de la siguiente manera:

screen.height; screen.width;

Si necesita una solución realmente a prueba de balas para el ancho y el alto del documento ( pageWidth y pageHeight en la imagen), puede considerar usar un complemento mío, jQuery.documentSize .

Tiene un solo propósito: devolver siempre el tamaño de documento correcto, incluso en escenarios en los que jQuery y otros métodos fail . A pesar de su nombre, no necesariamente tiene que usar jQuery, está escrito en Javascript de vainilla y también funciona sin jQuery .

Uso:

var w = $.documentWidth(), h = $.documentHeight();

para el document global. Para otros documentos, por ejemplo, en un iframe incrustado al que tiene acceso, pase el documento como un parámetro:

var w = $.documentWidth( myIframe.contentDocument ), h = $.documentHeight( myIframe.contentDocument );

Actualización: ahora también para las dimensiones de la ventana

Desde la versión 1.1.0, jQuery.documentSize también maneja las dimensiones de la ventana.

Eso es necesario porque

$( window ).height() está $( window ).height() en iOS , hasta el punto de ser inútil
$( window ).width() y $( window ).height() no son confiables en el móvil porque no manejan los efectos del zoom móvil.

jQuery.documentSize proporciona $.windowWidth() y $.windowHeight() , que resuelven estos problemas. Para más información, por favor revisa la documentación .

También puede obtener el ancho y alto de VENTANA, evitando las barras de herramientas del navegador y otras cosas. Es el área real utilizable en la ventana del navegador .

Para hacer esto, use las propiedades de window.innerWidth y window.innerHeight ( w3schools.com/jsref/prop_win_innerheight.asp ).

En la mayoría de los casos, será la mejor manera, por ejemplo, de mostrar un diálogo modal flotante perfectamente centrado. Le permite calcular posiciones en la ventana, independientemente de la orientación de la resolución o el tamaño de la ventana que utilice el navegador.

Una forma no jQuery de obtener la dimensión de pantalla disponible. window.screen.width/height ya se ha instalado, pero para un diseño web receptivo y una completa integridad, creo que vale la pena mencionar esos atributos:

alert(window.screen.availWidth); alert(window.screen.availHeight);

http://www.quirksmode.org/dom/w3c_cssom.html#t10 :

availWidth and availHeight - El ancho y la altura disponibles en la pantalla (excluyendo las barras de tareas del sistema operativo y demás).