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

8 minutos de lectura

¿Como obtener las dimensiones de la ventana grafica del navegador
Alix Axel

Quiero brindar a mis visitantes la capacidad de ver imágenes en alta calidad, ¿hay alguna forma de que pueda 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í:

¿Como obtener las dimensiones de la ventana grafica del navegador

  • Lo que hago es configurar un elemento, generalmente html, al 100% de altura y obtener su altura. Trabajos simples en todas partes.

    – Muhammad Umer

    18/10/2014 a las 18:49

  • @MuhammadUmer buena captura! Si se siente frustrado al obtener las dimensiones (y lo hará, en teléfonos móviles sin jQuery), puede getComputedStyle del expandido html etiqueta.

    – Dan

    19 de noviembre de 2014 a las 13:45

  • Además, puede utilizar el W biblioteca, que maneja la detección de ventana gráfica entre navegadores;)

    – pirsmk

    29 de abril de 2016 a las 13:51

1646964250 896 ¿Como obtener las dimensiones de la ventana grafica del navegador
ryanve

navegador cruzado @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 window.innerHeight

  • obtiene ventana gráfica CSS @media (width) y @media (height) que incluyen barras de desplazamiento
  • initial-scale y hacer zoom variaciones puede hacer que los valores móviles incorrectamente escalar hacia abajo a lo que PPK llama el visor visual y ser más pequeño que el @media valores
  • el zoom puede causar que los valores estén 1px fuera de lugar debido al redondeo nativo
  • undefined en IE8-

document.documentElement.clientWidth y .clientHeight


Recursos

  • @01100001 Reemplazar $ con verge. Si desea integrarse en jQuery, haga jQuery.extend(verge). Ver: verge.airve.com/#static

    – ryanve

    24 de febrero de 2013 a las 17:54

  • Solo quería mencionar que en IE8 (y quizás en otros) debe tener la <!DOCTYPE html> en la parte superior de la página para que el código funcione.

    – Tzury Bar Yochay

    9 de mayo de 2013 a las 7:44

  • No estoy contento con clientWidth/Height en dispositivos móviles, de verdad tripleodeon.com/wp-content/uploads/2011/12/table.html

    – Dan

    31 de julio de 2013 a las 10:57

  • A menos que me esté perdiendo algo, esta respuesta es incorrecta. En Chrome, al menos, document.documentElement.clientHeight devuelve el altura de la páginatiempo window.innerHeight devuelve el altura de la ventana gráfica. Gran diferencia.

    – Nate

    14 de abril de 2015 a las 15:08

  • diferentes variables de tamaño de pantalla/soluciones prueba en vivo: ryanve.com/lab/dimensiones

    – Alex Pandora

    4 de junio de 2019 a las 11:34


1646964251 677 ¿Como obtener las dimensiones de la ventana grafica del navegador
Scott Everden

funciones de dimensión jQuery

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

  • @alyourcode, imposible, jQuery es la respuesta a todas.

    – Xeoncross

    14 de junio de 2011 a las 15:40


  • Esto no obtiene el tamaño de la ventana gráfica, sino el tamaño general del documento. Intentalo.

    –Alejandro García Iglesias

    09/08/2013 a las 19:34

  • Para los navegadores que muestran sus barras de herramientas adicionales como HTML con posicionamiento fijo, esta solución no funciona, especialmente si desea usar en su código porcentajes y posicionamiento superior.

    – Adib Aroui

    6 mayo 2014 a las 14:15


  • @AlejandroIglesias: No, lo acabo de probar en esta página SO. $(window).height(); devuelve 536, mientras que $("html").height(); devuelve 10599

    – Flamm

    14/01/2016 a las 16:33

  • Advertencia: estas dimensiones no incluyen barras de desplazamiento (que tienen diferentes tamaños en diferentes navegadores y plataformas) y, por lo tanto, no coincidirán con las consultas de medios css. Otras respuestas aquí, sin embargo, resuelven este problema.

    -Spencer O’Reilly

    1 de junio de 2017 a las 16:56

¿Como obtener las dimensiones de la ventana grafica del navegador
Christian C. Salvado

Puedes usar el ventana.innerWidth y ventana.innerHeight propiedades

altura interior vs altura exterior

  • Aunque esto no funciona en IE +1 para el diagrama: D. Para una pregunta como esta, debería ser un delito no tener más de estos.

    – todotucódigo

    12 de diciembre de 2009 a las 23:14

  • @CMS document.documentElement.clientWidth es más precisa y más ampliamente apoyada que window.innerWidth

    – ryanve

    16 de enero de 2012 a las 5:24

  • @ryanve Si por “más preciso” quiere decir “ni siquiera remotamente hace lo mismo”, entonces sí: P

    – en caja

    7 mayo 2013 a las 11:39


  • ¿Firefox beta? Eso es algo que pertenecía al museo.

    – Derek 朕會功夫

    5 de octubre de 2014 a las 1:08

  • @boxed en Safari móvil, document.documentElement.clientWidth me da el ancho de la ventana gráfica mientras que window.innerWidth me da el ancho del documento. Sí, de esa forma.

    – Juan

    21 de marzo de 2016 a las 17:20

1646964255 533 ¿Como obtener las dimensiones de la ventana grafica del navegador
Chetán S

Si no está usando 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 en el modo estándar en IE. Esto se encarga.

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

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

1646964256 731 ¿Como obtener las dimensiones de la ventana grafica del navegador
Supermatemáticas101

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>

  • tenga en cuenta que el uso de stackoverflow de un iframe que rodea el fragmento de código estropea el resultado

    – Molinero

    11 de mayo de 2019 a las 7:43

  • De vez en cuando me encuentro con una respuesta que es un golpe directo en términos de solución y comprensión de cómo funciona todo. Ojalá pudiera dar 10 votos a favor en lugar de solo uno. Para que esto funcione de forma interactiva con el simulador móvil F12, descubrí que se necesita esta etiqueta en la página , escala mínima=1.0″ />

    – pghcpa

    15 de noviembre de 2020 a las 22:02


  • @pghcpa Ojalá pudiera darle a su comentario 10 votos a favor en lugar de uno. Esa metaetiqueta es un salvavidas.

    – Codificador Gautam YT

    24 de noviembre de 2021 a las 3:37

Sé que esto tiene una respuesta aceptable, pero me encontré con una situación en la que clientWidth 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, siendo “responsivo” y necesitaba obligar a los navegadores más grandes a usar una meta-ventana 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);

  • tenga en cuenta que el uso de stackoverflow de un iframe que rodea el fragmento de código estropea el resultado

    – Molinero

    11 de mayo de 2019 a las 7:43

  • De vez en cuando me encuentro con una respuesta que es un golpe directo en términos de solución y comprensión de cómo funciona todo. Ojalá pudiera dar 10 votos a favor en lugar de solo uno. Para que esto funcione de forma interactiva con el simulador móvil F12, descubrí que se necesita esta etiqueta en la página , escala mínima=1.0″ />

    – pghcpa

    15 de noviembre de 2020 a las 22:02


  • @pghcpa Ojalá pudiera darle a su comentario 10 votos a favor en lugar de uno. Esa metaetiqueta es un salvavidas.

    – Codificador Gautam YT

    24 de noviembre de 2021 a las 3:37

1646964257 920 ¿Como obtener las dimensiones de la ventana grafica del navegador
Comunidad

Pude encontrar una respuesta definitiva en JavaScript: The Definitive Guide, 6th Edition by 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.

  • ¿Estás hablando de Retina display o Landscape vs Portrait o la etiqueta meta viewport? No te refieres a píxeles virtuales como en snowdragonledhk.com/… ?

    – no polaridad

    13 mayo 2014 a las 18:31

  • 1) Cuando hablo de pantallas de alto DPI, me refiero a los píxeles virtuales que se explican aquí: stackoverflow.com/a/14325619/139361. Cada pantalla de iPhone tiene exactamente 320 píxeles virtuales de ancho. 2) Yo digo que: a)documentElement.clientWidth no responde al cambio de orientación del dispositivo en iOS. b) muestra el recuento de píxeles físicos (prácticamente inútil) en lugar de píxeles virtuales

    – Dan

    13 mayo 2014 a las 19:41

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad