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

2018

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

captura de pantalla que describe qué valores se desean

tórtola
fuente
99
pageHeight (en una foto) que puede obtener con: document.body.scrollHeight
befzz
¿Podría esto ser relevante también? developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia
MEM
3
Interesante: ryanve.com/lab/dimensions
e2-e4
1
Tutorial útil - w3schools.com/jsref/prop_win_innerheight.asp
Tío Iroh

Respuestas:

1389

Puede obtener el tamaño de la ventana o documento con jQuery:

// Size of browser viewport.
$(window).height();
$(window).width();

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

Para el tamaño de pantalla, puede usar el screenobjeto:

window.screen.height;
window.screen.width;
Ankit Jaiswal
fuente
2
El método jQuery height () parece funcionar para todos los elementos y devuelve un número ( 46) en lugar de una cadena como css ('height') ( "46px").
Chris
66
Cuando se trata de Safari móvil, lamentablemente jQuery no es una solución perfecta para esta pregunta. Vea la nota en la línea # 13 en github.com/jquery/jquery/blob/master/src/dimensions.js
Joshua
8
@ 웃 웃웃 웃웃 ¿qué editaste en la respuesta? según las revisiones, no editó nada en absoluto
Daniel W.
14
@Marco Kerwitz Lo peor es que escribí "javascript get window width" y el contenido de esta respuesta estaba en Google. Un gran menos uno de mi parte.
Maciej Krawczyk
2
El OP PIDIÓ que jquery es una opción. Quien ninja editó la pregunta original para excluirla tiene la culpa aquí, no las personas que dan respuestas legítimas utilizando una biblioteca de JavaScript mundialmente aceptada.
Increíble
963

Esto tiene todo lo que necesita saber: Obtenga el tamaño de ventana / ventana gráfica

pero en resumen:

var win = window,
    doc = document,
    docElem = doc.documentElement,
    body = doc.getElementsByTagName('body')[0],
    x = win.innerWidth || docElem.clientWidth || body.clientWidth,
    y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
alert(x + ' × ' + y);

Violín

Por favor, deja de editar esta respuesta. Ha sido editado 22 veces por diferentes personas para que coincida con su preferencia de formato de código. También se ha señalado que esto no es necesario si solo desea apuntar a los navegadores modernos; de ser así, solo necesita lo siguiente:

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

console.log(width, height);
sidonaldson
fuente
58
¿Por qué no g = document.body?
un nerd pagado el
51
@apaidnerd: los navegadores que desafían los estándares como IE8 no admiten document.body. IE9, sin embargo, lo hace.
Michael Mikowski
46
@MichaelMikowski ¡Eso no es cierto! Incluso IE5 es compatible document.body.
Nux
32
@nux Estoy corregido, y he confirmado el soporte en IE8. Sin embargo, sé que al menos un navegador al que apuntamos recientemente no admitía document.body y tuvimos que cambiar para usar el enfoque getElementsByTagName. Pero supongo que no recuerdo bien el navegador. ¡Lo siento!
Michael Mikowski
32
Solo quisiera comentar muy cuidadosamente que los nombres de variables de una letra nunca son útiles.
wybe
480

Aquí hay una solución de navegador cruzado con JavaScript puro ( Fuente ):

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

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
confile
fuente
99
Esto es mejor porque si puede llamar al script lo suficientemente temprano en el proceso de carga (a menudo la idea), entonces body elementdevolverá un valor undefinedya que el dom no está cargado todavía.
dgo
16
¡DECIR AH! Hilo viejo pero gracias por eso! Supongo que soy uno de esos viejos "idiotas" que intentan apoyar al menos a IE8 cuando sea posible, en beneficio del sorprendente número de usuarios domésticos mayores que nunca dejarán de usar XP hasta que sus máquinas se incendien. Me canso de hacer preguntas y, en lugar de obtener una respuesta, me votan con "¡DEJEN DE APOYAR A IE8!" como un comentario ¡Gracias otra véz! Esto resolvió un problema para mí en un zoom de foto javascript puro que había hecho. Es un poco lento en IE8, pero ahora al menos funciona. :-)
Randy
1
genial, es mucho mejor que descansar.
vinayak shahdeo
95

Una forma que no es jQuery para obtener la dimensión de pantalla disponible. window.screen.width/heightya se ha presentado, pero para un diseño web receptivo y por completo, 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 y availHeight : el ancho y la altura disponibles en la pantalla (sin incluir las barras de tareas del sistema operativo y demás).

Daniel W.
fuente
igual que el ancho de pantalla.Altura - en el navegador Android Chrome muestra dividido por la relación de píxeles :(
Darius.V
2
window.screen.availHeightparece asumir el modo de pantalla completa para que el modo de pantalla normal fuerce el desplazamiento (probado en Firefox y Chrome).
Suzana
@Suzana_K luego use window.screen.heighten su lugar.
vallentin el
@vallentin window.screen.height no funcionará, pero window.innerHeight sí
Sam
67

Pero cuando hablamos de pantallas receptivas 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 :)

Aabha Pandey
fuente
2
Esta debería ser la respuesta aceptada con muchos votos a favor. Una respuesta mucho más útil que la respuesta actualmente aceptada, y tampoco depende de jQuery.
developerbmw
55
Desafortunadamente, window.innerWidthy window.innerHeightno tomo en cuenta el tamaño de la barra de desplazamiento. Si hay barras de desplazamiento, estos métodos arrojan resultados incorrectos para el tamaño de la ventana en casi todos los navegadores de escritorio. Ver stackoverflow.com/a/31655549/508355
hashchange del
20

También puede obtener el ancho y la altura de la 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: window.innerWidth y window.innerHeightpropiedades ( vea el documento en w3schools ).

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, sin importar qué orientación de resolución o tamaño de ventana esté usando el navegador.

serfer2
fuente
2
Esto no es compatible con ie8 ni ie7, según w3schools. Además, debe tener cuidado cuando se vincula a w3schools. Ver meta.stackexchange.com/questions/87678/…
thecarpy
20
function wndsize(){
  var w = 0;var h = 0;
  //IE
  if(!window.innerWidth){
    if(!(document.documentElement.clientWidth == 0)){
      //strict mode
      w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
    } else{
      //quirks mode
      w = document.body.clientWidth;h = document.body.clientHeight;
    }
  } else {
    //w3c
    w = window.innerWidth;h = window.innerHeight;
  }
  return {width:w,height:h};
}
function wndcent(){
  var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};
  var _x = 0;var _y = 0;var offsetX = 0;var offsetY = 0;
  //IE
  if(!window.pageYOffset){
    //strict mode
    if(!(document.documentElement.scrollTop == 0)){offsetY = document.documentElement.scrollTop;offsetX = document.documentElement.scrollLeft;}
    //quirks mode
    else{offsetY = document.body.scrollTop;offsetX = document.body.scrollLeft;}}
    //w3c
    else{offsetX = window.pageXOffset;offsetY = window.pageYOffset;}_x = ((wndsize().width-hWnd.width)/2)+offsetX;_y = ((wndsize().height-hWnd.height)/2)+offsetY;
    return{x:_x,y:_y};
}
var center = wndcent({width:350,height:350});
document.write(center.x+';<br>');
document.write(center.y+';<br>');
document.write('<DIV align="center" id="rich_ad" style="Z-INDEX: 10; left:'+center.x+'px;WIDTH: 350px; POSITION: absolute; TOP: '+center.y+'px; HEIGHT: 350px"><!--К сожалению, у Вас не установлен flash плеер.--></div>');
tipo
fuente
20

Para verificar el alto 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úrate de que la pantalla de tu navegador no esté en modo 'maximizar'. Si la pantalla del navegador está en modo 'maximizar', primero debe hacer clic en el botón maximizar (presente en la esquina superior derecha o izquierda) y des-maximizarlo.

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)
solanki ...
fuente
1
¿Por qué no es esta la respuesta seleccionada?
Iulian Onofrei
1
@IulianOnofrei porque no responde completamente el conjunto original de preguntas. Broma, es la respuesta correcta para mí.
robar el
innerWidth y innerHeight solo son precisos si la escala de la ventana gráfica es 1. Este es el valor predeterminado, pero se puede cambiar inadvertidamente mediante transformaciones css.
Victor Stoddard
"window.innerWidth" en lugar de "screen.width" funcionó para mí para determinar el tamaño del navegador del usuario. ¡Gracias!
Kevin Pajak
10

Si necesita una solución verdaderamente a prueba de balas para el ancho y la altura del documento (el pageWidthy pageHeighten 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 situaciones en las que jQuery y otros métodos fallan . A pesar de su nombre, no necesariamente tiene que usar jQuery: está escrito en Javascript vainilla y también funciona sin jQuery .

Uso:

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

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

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

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

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

Eso es necesario porque

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

hashchange
fuente
VM2859: 1 DOMException no capturado: bloqueó un marco con origen " localhost: 12999 " para que no acceda a un marco de origen cruzado. (...) ¿hay alguna forma de superar esto?
fizmhd
1
No puede acceder a iframes desde un dominio diferente, viola la política del mismo origen . Mira esta respuesta .
hashchange del
Esto no funciona si está incrustando un iframe e intenta obtener la altura del puerto de vista. window.innerHeight igual a la altura del documento que tiene errores. No puede acceder a marcos. desde un dominio diferente no es una solución factible.
M.Abulsoud
@ M.Abulsoud Siempre que tenga acceso al iframe (sin violación de CORS), funciona y está cubierto por el conjunto de pruebas. Usa esta sintaxis . Incluso funciona con múltiples iframes anidados uno dentro del otro; vea este ejemplo en Codepen . Si su configuración funciona en general, pero falla en un único navegador específico, podría ser un error que desconozco. ¿Quizás pueda abrir un problema en ese caso? Gracias.
hashchange
8

Escribí un pequeño marcador de JavaScript que puede 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 bookmarklet 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);

Código original

El código original está en 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 un pequeño div que se actualiza cuando cambia el tamaño de su ventana.

Andi Giga
fuente
5

En algunos casos, el diseño receptivo $(document).height()puede devolver datos incorrectos que solo muestran la altura del puerto de visualización. Por ejemplo, cuando un envoltorio div # tiene una altura: 100%, ese envoltorio # puede estirarse mediante un bloque dentro de él. Pero su altura seguirá siendo como la altura de la ventana gráfica. En tal situación, podría usar

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

Eso representa el tamaño real de la envoltura.

Akim Kelar
fuente
Muchos responden con cientos de votos a favor, pero solo este fue útil.
Nakilon
5

Guía completa relacionada con los tamaños de pantalla

JavaScript

Para la altura:

document.body.clientHeight  // Inner height of the HTML document body, including padding 
                            // but not the horizontal scrollbar height, border, or margin

screen.height               // Device screen height (i.e. all physically visible stuff)
screen.availHeight          // Device screen height minus the operating system taskbar (if present)
window.innerHeight          // The current document's viewport height, minus taskbars, etc.
window.outerHeight          // Height the current window visibly takes up on screen 
                            // (including taskbars, menus, etc.)

Nota: Cuando la ventana se maximiza, esto será igual a screen.availHeight

Para ancho:

document.body.clientWidth   // Full width of the HTML page as coded, minus the vertical scroll bar
screen.width                // Device screen width (i.e. all physically visible stuff)
screen.availWidth           // Device screen width, minus the operating system taskbar (if present)
window.innerWidth           // The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
window.outerWidth           // The outer window width (including vertical scroll bar,
                            // toolbars, etc., includes padding and border but not margin)

Jquery

Para la altura:

$(document).height()    // Full height of the HTML page, including content you have to 
                        // scroll to see

$(window).height()      // The current document's viewport height, minus taskbars, etc.
$(window).innerHeight() // The current document's viewport height, minus taskbars, etc.
$(window).outerHeight() // The current document's viewport height, minus taskbars, etc.                         

Para ancho:

$(document).width()     // The browser viewport width, minus the vertical scroll bar
$(window).width()       // The browser viewport width (minus the vertical scroll bar)
$(window).innerWidth()  // The browser viewport width (minus the vertical scroll bar)
$(window).outerWidth()  // The browser viewport width (minus the vertical scroll bar)

Referencia: https://help.optimizely.com/Build_Campaigns_and_Experiments/Use_screen_measurements_to_design_for_responsive_breakpoints

Hamza Abbasi
fuente
4

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

pyrsmk
fuente
3

A veces necesita ver los cambios de ancho / alto mientras cambia 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 todos los cambios de tamaño y actualizaciones casi inmediatas.

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

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


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

  function gebID(id){ return document.getElementById(id); }
  function gebTN(tagName, parentEl){ 
     if( typeof parentEl == "undefined" ) var parentEl = document;
     return parentEl.getElementsByTagName(tagName);
  }
  function setStyleToTags(parentEl, tagName, styleString){
    var tags = gebTN(tagName, parentEl);
    for( var i = 0; i<tags.length; i++ ) tags[i].setAttribute('style', styleString);
  }
  function testSizes(){
    gebID( 'screen.Width' ).innerHTML = screen.width;
    gebID( 'screen.Height' ).innerHTML = screen.height;

    gebID( 'window.Width' ).innerHTML = window.innerWidth;
    gebID( 'window.Height' ).innerHTML = window.innerHeight;

    gebID( 'documentElement.Width' ).innerHTML = document.documentElement.clientWidth;
    gebID( 'documentElement.Height' ).innerHTML = document.documentElement.clientHeight;

    gebID( 'body.Width' ).innerHTML = gebTN("body")[0].clientWidth;
    gebID( 'body.Height' ).innerHTML = gebTN("body")[0].clientHeight;  
  }

  var table = document.createElement('table');
  table.innerHTML = 
       "<tr><th>SOURCE</th><th>WIDTH</th><th>x</th><th>HEIGHT</th></tr>"
      +"<tr><td>screen</td><td id='screen.Width' /><td>x</td><td id='screen.Height' /></tr>"
      +"<tr><td>window</td><td id='window.Width' /><td>x</td><td id='window.Height' /></tr>"
      +"<tr><td>document<br>.documentElement</td><td id='documentElement.Width' /><td>x</td><td id='documentElement.Height' /></tr>"
      +"<tr><td>document.body</td><td id='body.Width' /><td>x</td><td id='body.Height' /></tr>"
  ;

  gebTN("body")[0].appendChild( table );

  table.setAttribute(
     'style',
     "border: 2px solid black !important; position: fixed !important;"
     +"left: 50% !important; top: 0px !important; padding:10px !important;"
     +"width: 150px !important; font-size:18px; !important"
     +"white-space: pre !important; font-family: monospace !important;"
     +"z-index: 9999 !important;background: white !important;"
  );
  setStyleToTags(table, "td", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
  setStyleToTags(table, "th", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");

  table.style.setProperty( 'margin-left', '-'+( table.clientWidth / 2 )+'px' );

  setInterval( testSizes, 200 );

EDITAR: ahora los estilos se aplican solo al elemento de la tabla del registrador, no a todas las tablas, también esta es una solución libre de jQuery :)

jave.web
fuente
3

Con la introducción de globalThisen ES2020 puede utilizar las propiedades similares.

Para tamaño de pantalla:

globalThis.screen.availWidth 
globalThis.screen.availHeight

Para el tamaño de la ventana

globalThis.outerWidth
globalThis.outerHeight

Para compensación:

globalThis.pageXOffset
globalThis.pageYOffset

...& pronto.

alert("Screen Width: "+ globalThis.screen.availWidth +"\nScreen Height: "+ globalThis.screen.availHeight)

Prashant Gupta
fuente
2

Puede 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 screenWidthvariable, simplemente use screen.width, igual screenHeightque, solo usaría screen.height.

Para obtener el ancho y la altura de su ventana, sería screen.availWidtho screen.availHeightrespectivamente.

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

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

Nuevamente usando jQuery, use $("html").offset().topy $("html").offset().leftpara su pageXy pageYvalores.

Zach Barham
fuente
screenX / Y es relativo a la pantalla principal, no relativo a la pantalla superior izquierda / superior. Es por eso que el valor es negativo si actualmente está en una pantalla a la izquierda de la pantalla principal.
Tom hace
0

¡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();
})();


fuente
1
! screen-ok
0

Así es como logré obtener el ancho de pantalla en React JS Project:

Si el ancho es igual a 1680, devuelva 570; de lo contrario, devuelva 200

var screenWidth = window.screen.availWidth;

<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a  </Label>

Screen.availWidth

Prashant Yalatwar
fuente