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

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

captura de pantalla que describe qué valores se buscan

preguntado el 09 de agosto de 10 a las 03:08

pageHeight (en una foto) que puede obtener con: document.body.scrollHeight -

ver https://developer.mozilla.org/en-US/docs/Web/API/Window.screen y http://www.quirksmode.org/dom/w3c_cssom.html#screenview -

¿Podría esto ser relevante también? developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia -

Interesante: ryanve.com/lab/dimensiones -

Tutorial útil - w3schools.com/jsref/prop_win_innerheight.asp -

20 Respuestas

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 la pantalla, puede usar el screen :

window.screen.height;
window.screen.width;

Respondido el 16 de Septiembre de 19 a las 05:09

El método jQuery height () parece funcionar para todos los elementos y devuelve un número (46) en lugar de una cadena como css ('altura') ("46px"). - Chris

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

@ 웃 웃웃 웃웃 ¿qué editaste en la respuesta? de acuerdo con las revisiones, no editaste nada en absoluto - Daniel W.

@Marco Kerwitz Lo peor es que escribí "javascript obtener ancho de ventana" y el contenido de esta respuesta estaba en Google. Un gran menos uno de mi parte. - Maciej Krawczyk

El OP HIZO PREGUNTAR que jquery es una opción. Quien sea que el ninja editó la pregunta original para excluirla tiene la culpa aquí, no las personas que dan respuestas legítimas usando una biblioteca javascript aceptada por el mundo. - IncreíbleSombrero

Esto tiene todo lo que necesita saber: Obtener tamaño de ventana / ventana

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

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

Respondido 17 Abr '20, 05:04

Por qué no g = document.body ? - un nerd pagado

@apaidnerd: los navegadores que desafían los estándares como IE8 no son compatibles con document.body. IE9, sin embargo, sí lo hace. - miguel mikowski

@MichaelMikowski ¡Eso no es cierto! Incluso IE5 admite document.body. - Nux

@nux Estoy corregido y he confirmado el soporte en IE8. Sin embargo, sé que al menos un navegador al que nos dirigíamos recientemente no admitía document.body y tuvimos que cambiar para usar el enfoque getElementsByTagName. Pero supongo que me olvidé del navegador. ¡Lo siento! - miguel mikowski

Solo me gustaría comentar muy tranquilamente que los nombres de variables de una letra nunca son útiles. - wybe

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

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

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

respondido 29 mar '15, 14:03

Esto es mejor porque si puede llamar al script lo suficientemente temprano en el proceso de carga (a menudo la idea), entonces el body element devolverá un valor de undefined ya que el dom aún no está cargado. - dgo

¡DECIR AH! Hilo antiguo pero gracias por eso! Supongo que soy uno de esos viejos "idiotas" que intenta respaldar al menos a IE8 cuando es 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, recibir una votación negativa con solo "¡¡DEJA DE APOYAR IE8 !!" como comentario. ¡Gracias otra véz! Esto me resolvió un problema en un zoom de fotos de JavaScript puro que había hecho. Es un poco lento en IE8, pero ahora al menos funciona. :-) - cachondo

genial, es mucho mejor que descansar. - vinayak shahdeo

Una forma no jQuery de obtener la dimensión de pantalla disponible. window.screen.width/height ya se ha puesto, pero por el diseño web receptivo y la 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 :

ancho de disponibilidad y altura disponible - El ancho y alto disponibles en la pantalla (excluidas las barras de tareas del sistema operativo y demás).

Respondido 27 Feb 14, 22:02

Lo mismo que el ancho de la pantalla. Altura: en el navegador Chrome de Android, se muestra dividido por la proporción de píxeles :( - Dariux

window.screen.availHeight parece 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 usa window.screen.height en lugar de. - Vallentin

@vallentin window.screen.height no funcionará, pero window.innerHeight sí - Diana

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 extra de la barra de desplazamiento y no tenemos que preocuparnos por ajustar ese espacio :)

Respondido 22 Abr '15, 08:04

Esta debería ser la respuesta aceptada con muchos votos a favor. Una respuesta mucho más útil que la respuesta aceptada actualmente, y tampoco depende de jQuery. - desarrolladorbmw

Desafortunadamente, window.innerWidth y window.innerHeight no tener 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 - cambio hash

Completo 2020

Me sorprende que la pregunta tenga unos 10 años y parece que hasta ahora nadie ha dado una respuesta completa (con 10 valores) todavía. Así que analizo cuidadosamente la pregunta OP (especialmente la imagen) y tengo algunos comentarios

  • centro del sistema de coordenadas (0,0) está en la ventana de visualización (ventana del navegador sin barras y bordes principales) en la esquina superior izquierda y los ejes se dirigen hacia la derecha y hacia abajo (lo que se marcó en la imagen OP) por lo que los valores de pageX, pageY, screenX, screenY debe ser negativo (o cero si la página es pequeña o no se desplaza)
  • es screenHeight/Width OP quiere contar el alto / ancho de la pantalla, incluida la barra de menú del sistema (por ejemplo, en MacOs); es por eso que NO usamos .availWidth/Height (que no lo cuenta)
  • es windowWidth/Height OP no quiere contar el tamaño de las barras de desplazamiento, así que usamos .clientWidth/Height
  • al screenY - en la siguiente solución agregamos a la posición de la esquina superior izquierda del navegador (window.screenY) la altura de su menú / tablillas / barra de URL). Pero es difícil calcular ese valor si la barra inferior de descarga aparece en el navegador y / o si la consola del desarrollador está abierta en la parte inferior de la página; en ese caso, este valor aumentará del tamaño de la altura de la barra / consola en la solución siguiente. Probablemente sea imposible leer el valor de la altura de la barra / consola para hacer la corrección (sin algún truco como pedirle al usuario que cierre esa barra / consola antes de las mediciones ...)
  • pageWidth - en caso de que pageWidth sea menor que windowWidth, necesitamos calcular manualmente el tamaño de <body> elementos secundarios para obtener este valor (hacemos un cálculo de ejemplo en contentWidth en la siguiente solución, pero en general esto puede ser difícil para ese caso)
  • por simplicidad asumo que <body> margin = 0 - si no es así, debería considerar estos valores al calcular pageWidth/Height y pageX/Y

function sizes() {
  let contentWidth = [...document.body.children].reduce( 
    (a, el) => Math.max(a, el.getBoundingClientRect().right), 0) 
    - document.body.getBoundingClientRect().x;

  return {
    windowWidth:  document.documentElement.clientWidth,
    windowHeight: document.documentElement.clientHeight,
    pageWidth:    Math.min(document.body.scrollWidth, contentWidth),
    pageHeight:   document.body.scrollHeight,
    screenWidth:  window.screen.width,
    screenHeight: window.screen.height,
    pageX:        document.body.getBoundingClientRect().x,
    pageY:        document.body.getBoundingClientRect().y,
    screenX:     -window.screenX,
    screenY:     -window.screenY - (window.outerHeight-window.innerHeight),
  }
}



// TEST

function show() {
  console.log(sizes());
}
body { margin: 0 }
.box { width: 3000px; height: 4000px; background: red; }
<div class="box">
  CAUTION: stackoverflow snippet gives wrong values for screenX-Y, 
  but if you copy this code to your page directly the values will be right<br>
  <button onclick="show()" style="">CALC</button>
</div>

Lo pruebo en Chrome 83.0, Safari 13.1, Firefox 77.0 y Edge 83.0 en MacOs High Sierra

Respondido el 08 de diciembre de 20 a las 11:12

¡La mejor respuesta! Ayuda mucho - Sudarshana Dayananda 

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

respondido 24 nov., 15:19

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

paso 1: Haga clic con 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 de su 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 anular la maximización.

paso 3: Ahora, escriba 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)

Respondido 09 Jul 16, 05:07

¿Por qué no es esta la respuesta seleccionada? - Iulian Onofrei

@IulianOnofrei porque no responde completamente al conjunto de preguntas original. Siendo broma, es la respuesta correcta para mí. - robar

innerWidth y innerHeight solo son precisos si la escala de la ventana gráfica es 1. Este es el valor predeterminado, pero puede cambiarse inadvertidamente mediante transformaciones css. - Víctor Stoddard

"window.innerWidth" en lugar de "screen.width" funcionó para mí para determinar el tamaño del navegador del usuario - ¡gracias! - kevin pajak

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

Para hacer esto, use: window.innerWidth y window.innerHeight propiedades (ver 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.

Respondido 21 ago 14, 11:08

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/… - elcarpio

Si necesita una solución verdaderamente a prueba de balas para el ancho y alto del documento (el pageWidth y pageHeight en la imagen), es posible que desee considerar el uso de 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 fallar. A pesar de su nombre, no es necesario que utilice jQuery; está escrito en JavaScript vanilla y funciona sin jQuery también.

Uso:

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

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

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

Actualización: ahora también para las dimensiones de las ventanas

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

Eso es necesario porque

  • $( window ).height() is buggy en iOS, hasta el punto de ser inútil
  • $( window ).width() y $( window ).height() Fuck Cancer. poco confiable en el móvil 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.

contestado el 23 de mayo de 17 a las 13:05

VM2859: 1 DOMException no detectada: bloqueado un marco con origen "localhost: 12999"para acceder a un marco de origen cruzado. (...) ¿hay alguna forma de superar esto? fizmhd

No puede acceder a iframes desde un dominio diferente, viola la política del mismo origen. Echa un vistazo a esta respuesta. - cambio hash

Esto no funciona si está incrustando un iframe y tratando de obtener la altura del puerto de visualización. window.innerHeight igual a la altura del documento que tiene errores. No puede acceder a los marcos. de 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 varios iframes anidados entre sí. ver este ejemplo en Codepen. Si su configuración funciona en general, pero falla en un solo navegador específico, puede ser un error del que no tengo conocimiento. ¿Quizás puedas abrir un problema en ese caso? Gracias. - cambio hash

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

JavaScript

Por 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 está maximizada, 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

Por 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

Respondido el 03 de diciembre de 19 a las 09:12

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

Codigo 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 antepone un pequeño div que se actualiza cuando cambia el tamaño de la ventana.

respondido 31 mar '16, 10:03

En algunos casos relacionados con el diseño receptivo $(document).height() puede devolver datos incorrectos que solo muestran la altura del puerto de visualización. Por ejemplo, cuando algún contenedor div # tiene altura: 100%, ese # contenedor puede ser estirado por algún bloque dentro de él. Pero su altura seguirá siendo como la altura de la ventana gráfica. En tal situación, puede usar

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

Eso representa el tamaño real de la envoltura.

Respondido 15 Oct 15, 09:10

Muchos responden con cientos de votos a favor, pero solo este fue útil. - Nakilon

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 la 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 al respecto): https://github.com/pyrsmk/W

Respondido 13 Abr '16, 09:04

Con la introducción de globalThis in ES2020 puedes usar propiedades como.

Para el tamaño de la 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)

Respondido el 11 de enero de 20 a las 14:01

A veces necesita ver los cambios de ancho / alto mientras cambia el tamaño de la ventana y el contenido interno.

Para eso, escribí un pequeño script que agrega un cuadro de registro que monitorea dinámicamente todos los cambios de tamaño y se actualiza casi de inmediato.

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

  • úsalo en un real página web
  • úsalo para probar móvil / receptivo vistas


Probado en: Chrome 40, IE11, pero también es muy posible trabajar en otros navegadores / 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 );

EDIT: Ahora los estilos se aplican solo al elemento de la tabla del registrador, no a todas las tablas, también esto es un sin jQuery solución :)

Respondido el 01 de diciembre de 15 a las 12:12

Respuesta gráfica: Versión gráfica de la respuesta (............)

Respondido 02 Abr '21, 09:04

Puede utilizar el Pantalla objeto para conseguir 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 screenWidth variable, solo usa screen.width, lo mismo con screenHeight, solo usarías screen.height.

Para obtener el ancho y la altura de su ventana, sería screen.availWidth or screen.availHeight respectivamente.

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

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

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

respondido 11 mar '16, 15:03

screenX / Y es relativo a la pantalla principal, no relativo a la pantalla más a la izquierda / superior. Es por eso que el valor es negativo si se encuentra actualmente en una pantalla a la izquierda de la pantalla principal. - tom

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

Respondido el 13 de Septiembre de 17 a las 05:09

!pantalla-ok - usuario8202629

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

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

var screenWidth = window.screen.availWidth;

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

Screen.availWidth

Respondido el 26 de junio de 19 a las 08:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.