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

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;

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);

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;

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).

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 :)

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.

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>');

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)

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

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

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

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.

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.

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

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

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 :)

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)

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.

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

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