¿Cómo obtener las dimensiones de la ventana gráfica del navegador?

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

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

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

const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);

window.innerWidth y .innerHeight

• obtiene la vista CSS @media (width) y @media (height)que incluyen barras de desplazamiento
• initial-scaley las variaciones de zoom pueden hacer que los valores móviles se escalen incorrectamente a lo que PPK llama la vista visual y sean más pequeños que@media valores
• el zoom puede hacer que los valores estén 1px desactivados debido al redondeo nativo
• undefined en IE8-

document.documentElement.clientWidth y .clientHeight

• es igual al ancho de la vista CSS menos el ancho de la barra de desplazamiento
• coincide @media (width)y @media (height)cuando no hay barra de desplazamiento
• igual jQuery(window).width() que jQuery llama la ventana del navegador
• navegador cruzado disponible
• inexacto si falta doctype

Recursos

• Salidas en vivo para varias dimensiones
• verge utiliza técnicas de visualización de navegador cruzado
• Usos realesmatchMedia para obtener dimensiones precisas en cualquier unidad

Funciones de dimensión jQuery

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

Puede usar las propiedades window.innerWidth y window.innerHeight .

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

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

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

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

Espero que esto ayude a alguien, puede que no sea perfecto, pero funciona en mis pruebas en 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);

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>

Pude encontrar una respuesta definitiva en JavaScript: The Definitive Guide, 6th Edition by O'Reilly, p. 391:

Esta solución funciona incluso en 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 así if (d.compatMode == "CSS1Compat"), todo se ve bien.

Si está buscando una solución que no sea jQuery que proporcione valores correctos en píxeles virtuales en dispositivos móviles , y cree que es simple window.innerHeighto document.documentElement.clientHeightpuede resolver su problema, estudie primero este enlace: https://tripleodeon.com/assets/2011/12/ table.html

El desarrollador ha realizado buenas pruebas que revelan el problema: puede obtener valores inesperados para Android / iOS, horizontal / vertical, pantallas normales / de alta densidad.

Mi respuesta actual aún no es una bala de plata (// todo), sino más bien una advertencia para aquellos que van a copiar y pegar rápidamente cualquier solución de este hilo en el código de producción.

Estaba buscando el ancho de página en píxeles virtuales en dispositivos móviles, y encontré que el único código de trabajo es (¡inesperadamente!) window.outerWidth. Más tarde examinaré esta tabla para encontrar la solución correcta que proporcione la altura, excluyendo la barra de navegación, cuando tenga tiempo.

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

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

Una solución que se ajuste a los estándares W3C sería crear un div transparente (por ejemplo, dinámicamente con JavaScript), establecer su ancho y alto en 100vw / 100vh (unidades Viewport) y luego obtener su offsetWidth y offsetHeight. Después de eso, el elemento puede eliminarse nuevamente. Esto no funcionará en los navegadores más antiguos porque las unidades de la ventana gráfica son relativamente nuevas, pero si no le importan sino los estándares (que pronto serán), definitivamente podría ir de esta manera:

var objNode = document.createElement("div");
objNode.style.width  = "100vw";
objNode.style.height = "100vh";
document.body.appendChild(objNode);
var intViewportWidth  = objNode.offsetWidth;
var intViewportHeight = objNode.offsetHeight;
document.body.removeChild(objNode);

Por supuesto, también puede establecer objNode.style.position = "fixed" y luego usar el 100% como ancho / alto; esto debería tener el mismo efecto y mejorar la compatibilidad hasta cierto punto. Además, establecer la posición en fijo podría ser una buena idea en general, porque de lo contrario el div será invisible pero consumirá algo de espacio, lo que provocará la aparición de barras de desplazamiento, etc.

Así es como lo hago, lo probé en IE 8 -> 10, FF 35, Chrome 40, funcionará muy bien en todos los navegadores modernos (como se define window.innerWidth) y en IE 8 (sin ventana. innerWidth) también funciona sin problemas, cualquier problema (como parpadeo debido al desbordamiento: "oculto"), por favor repórtelo. No estoy realmente interesado en la altura de la ventana gráfica ya que hice esta función solo para solucionar algunas herramientas receptivas, pero podría implementarse. Espero que ayude, agradezco los comentarios y sugerencias.

function viewportWidth () {
  if (window.innerWidth) return window.innerWidth;
  var
  doc = document,
  html = doc && doc.documentElement,
  body = doc && (doc.body || doc.getElementsByTagName("body")[0]),
  getWidth = function (elm) {
    if (!elm) return 0;
    var setOverflow = function (style, value) {
      var oldValue = style.overflow;
      style.overflow = value;
      return oldValue || "";
    }, style = elm.style, oldValue = setOverflow(style, "hidden"), width = elm.clientWidth || 0;
    setOverflow(style, oldValue);
    return width;
  };
  return Math.max(
    getWidth(html),
    getWidth(body)
  );
}