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


Como puedo conseguir windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY que funcionará en todos los principales navegadores?

screenshot describing which values are wanted


1596
2017-08-09 06:28


origen


Respuestas:


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 usar screen objeto de la siguiente manera:

screen.height;
screen.width;

1137
2017-08-09 06:39



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

Violín


815
2017-07-31 15:52



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;

362
2018-01-30 17:44



Una forma no jQuery de obtener la dimensión de pantalla disponible. window.screen.width/height ya se ha presentado, pero para el diseño web responsivo y la completitud, 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 el   pantalla (excluyendo las barras de tareas del sistema operativo y demás).


77
2018-06-20 10:06



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


47
2018-04-22 07:29



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

17
2018-02-11 04:25



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

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


15
2017-08-21 10:44



Para verificar el alto 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 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 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 des-maximizarlo.

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)

12
2017-07-09 04:22