¿Cómo puedo detectar el tamaño de la ventana con jQuery?

Question

¿Cómo puedo detectar el tamaño de la ventana/navegador con jQuery como Gmail? En Gmail, no es necesario actualizar o volver a cargar la página actual en cuanto hayamos cambiado la resolución de la ventana en la configuración de la ventana. En mi proyecto, necesito actualizar el navegador tan pronto como se haya cambiado la configuración de la ventana.

Cualquier idea será apreciada.

Answer 1

Usted realmente no se puede encontrar la resolución de visualización de una página web. Hay es una declaración de CSS Media Queries para él, pero está mal implementado en la mayoría de los dispositivos y navegadores, si es que lo está. Sin embargo, no es necesario conocer la resolución de la pantalla, porque el cambio que hace que el (píxel) de ancho de la ventana para cambiar, que puede detectarse usando los métodos que otros han descrito:

$(window).resize(function() { 
    // This will execute whenever the window is resized 
    $(window).height(); // New height 
    $(window).width(); // New width 
}); 

Usted también puede usar CSS Media Queries en buscadores que los soporten para adaptar el estilo de su página a varios anchos de visualización, pero realmente debe usar em unidades y porcentajes y min-width y max-width en su CSS si desea un diseño flexible adecuado. Gmail probablemente usa una combinación de todos estos.

Answer 2

//get dimensions 
var height = $(window).height(); 
var width = $(window).width(); 

//refresh on resize 
$(window).resize(function() { 
    location.reload(true) 
}); 

No estoy seguro de si desea juguetear con las dimensiones de los elementos o actualizar realmente la página. así que aquí un montón de cosas diferentes elige lo que quieres. incluso puede poner el alto y el ancho en el evento de cambio de tamaño si realmente lo desea.

Answer 3

¿Desea detectar cuándo se ha cambiado el tamaño de la ventana?

Puede usar JQuery's resize para adjuntar un controlador.

Answer 4

Usted puede obtener los valores para la anchura y la altura del navegador utilizando la siguiente:

$(window).height(); 
$(window).width(); 

para ser notificado cuando se cambia el tamaño del navegador, utilice esta unen devolución de llamada:

$(window).resize(function() { 
    // Do something 
}); 

Answer 5

También podría usar Javascript simple window.innerWidth para comparar el ancho.

pero el uso de jQuery .resize() dispara automáticamente para usted:

$(window).resize(function() { 
    // your code... 
}); 

http://api.jquery.com/resize/

Answer 6

haces un div en algún lugar de la página y poner este código:

<div id="winSize"></div> 
<script> 
    var WindowsSize=function(){ 
     var h=$(window).height(), 
      w=$(window).width(); 
     $("#winSize").html("<p>Width: "+w+"<br>Height: "+h+"</p>"); 
    }; 
    $(document).ready(WindowsSize); 
    $(window).resize(WindowsSize); 
</script> 

Aquí hay un fragmento:

var WindowsSize=function(){ 
 
    \t var h=$(window).height(), 
 
    \t \t w=$(window).width(); 
 
    \t $("#winSize").html("<p>Width: "+w+"<br>Height:"+h+"</p>"); 
 
}; 
 
$(document).ready(WindowsSize); 
 
$(window).resize(WindowsSize);

#winSize{ 
 
    position:fixed; 
 
    bottom:1%; 
 
    right:1%; 
 
    border:rgba(0,0,0,0.8) 3px solid; 
 
    background:rgba(0,0,0,0.6); 
 
    padding:5px 10px; 
 
    color:#fff; 
 
    text-shadow:#000 1px 1px 1px,#000 -1px 1px 1px; 
 
    z-index:9999 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="winSize"></div>

Por supuesto, ¡aprovéchela para satisfacer sus necesidades! ;)