Pregunta Obtenga las dimensiones de la ventana del navegador con JavaScript


Quiero brindar a mis visitantes la posibilidad de ver imágenes en alta calidad, ¿hay alguna manera de detectar el tamaño de la ventana?

O mejor aún, ¿el tamaño de la ventana del navegador con JavaScript? Ver área verde aquí:


597
2017-08-08 05:54


origen


Respuestas:


Cross-browser  @media (width) y @media (height) valores

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.innerWidth y .innerHeight

  • se pone Ventana gráfica CSS  @media (width) y @media (height) que incluyen barras de desplazamiento
  • initial-scale y zoom variaciones puede causar valores móviles a erróneamente reducir a lo que PPK llama el visual viewport y ser más pequeño que el @media valores
  • el zoom puede causar que los valores estén 1px apagados debido al redondeo nativo
  • undefined en IE8-

document.documentElement.clientWidth y .clientHeight

Recursos


1014
2018-01-16 05:23



funciones de dimensión jQuery

$(window).width() y $(window).height()


97
2017-08-08 06:01



Puedes usar el window.innerWidth y window.innerHeight propiedades.

innerHeight vs outerHeight


61
2017-08-08 06:39



Si no usas jQuery, se pone feo. Aquí hay un fragmento que debería funcionar en todos los navegadores nuevos. El comportamiento es diferente en el modo Quirks y el modo estándar en IE. Esto se ocupa de eso.

var elem = (document.compatMode === "CSS1Compat") ? 
    document.documentElement :
    document.body;

var height = elem.clientHeight;
var width = elem.clientWidth;

30
2017-08-08 06:20



Sé que esto tiene una respuesta aceptable, pero me encontré con una situación donde clientWidth no funcionó, ya que iPhone (al menos el mío) devolvió 980, no 320, así que usé window.screen.width. Estaba trabajando en un sitio existente, me hicieron "receptivo" y necesitaba forzar a los navegadores más grandes a usar una metaventana diferente.

Espero que esto ayude a alguien, puede que no sea perfecto, pero funciona en mis pruebas con iOs y Android.

//sweet hack to set meta viewport for desktop sites squeezing down to mobile that are big and have a fixed width 
  //first see if they have window.screen.width avail
  (function() {
    if (window.screen.width)
    {
      var setViewport = {
        //smaller devices
        phone: 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no',
        //bigger ones, be sure to set width to the needed and likely hardcoded width of your site at large breakpoints  
        other: 'width=1045,user-scalable=yes',
        //current browser width
        widthDevice: window.screen.width,
        //your css breakpoint for mobile, etc. non-mobile first
        widthMin: 560,
        //add the tag based on above vars and environment 
        setMeta: function () {
          var params = (this.widthDevice <= this.widthMin) ? this.phone : this.other; 
          var head = document.getElementsByTagName("head")[0];
          var viewport = document.createElement('meta');
          viewport.setAttribute('name','viewport');
          viewport.setAttribute('content',params);
          head.appendChild(viewport);
        }
      }
      //call it 
      setViewport.setMeta();
    }
  }).call(this);

10
2017-08-12 19:12



Pude encontrar una respuesta definitiva en JavaScript: The Definitive Guide, 6ª edición de O'Reilly, p. 391:

Esta solución funciona incluso en el modo Quirks, mientras que la solución actual de ryanve y ScottEvernden no.

function getViewportSize(w) {

    // Use the specified window or the current window if no argument
    w = w || window;

    // This works for all browsers except IE8 and before
    if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight };

    // For IE (or any browser) in Standards mode
    var d = w.document;
    if (document.compatMode == "CSS1Compat")
        return { w: d.documentElement.clientWidth,
           h: d.documentElement.clientHeight };

    // For browsers in Quirks mode
    return { w: d.body.clientWidth, h: d.body.clientHeight };

}

excepto por el hecho de que me pregunto por qué la línea if (document.compatMode == "CSS1Compat") no es if (d.compatMode == "CSS1Compat"), Todo se ve bien.


9
2017-08-17 01:18



Hay una diferencia entre window.innerHeight y document.documentElement.clientHeight. El primero incluye la altura de la barra de desplazamiento horizontal.


7
2018-02-16 21:31



Miré y encontré una forma de navegador cruzado:

function myFunction(){
  if(window.innerWidth !== undefined && window.innerHeight !== undefined) { 
    var w = window.innerWidth;
    var h = window.innerHeight;
  } else {  
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
  }
  var txt = "Page size: width=" + w + ", height=" + h;
  document.getElementById("demo").innerHTML = txt;
}
<!DOCTYPE html>
<html>
  <body onresize="myFunction()" onload="myFunction()">
   <p>
    Try to resize the page.
   </p>
   <p id="demo">
    &nbsp;
   </p>
  </body>
</html>


7
2018-05-30 09:07



Este código es de http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

NB: para leer el ancho, use console.log('viewport width'+viewport().width);


6
2017-12-31 08:01