如何使用jQuery检测窗口大小？

Question

如何使用Gmail等jQuery检测窗口/浏览器大小？在Gmail中，只要我们在窗口设置中更改了窗口分辨率，我们就不需要刷新或重新加载当前页面？在我的项目中，一旦窗口设置发生变化，我需要刷新浏览器。

任何想法将不胜感激。

Answer 1

您

Answer 2

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

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

不知道您是否想修补元素的尺寸或实际刷新页面。所以在这里一堆不同的东西挑选你想要的东西。如果你真的想要，你甚至可以在resize事件中放置高度和宽度。

Answer 3

您是否想要检测窗口的大小？

您可以使用JQuery的resize附加处理程序。

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

得到通知时，浏览器的大小时，使用绑定的回调：

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

Answer 4

您可以使用以下获得浏览器的宽度和高度值无法真正从网页中找到显示分辨率。有是一个CSS Media Queries语句，但它在大多数设备和浏览器中（如果有的话）执行得不好。不过，你不需要知道显示器的分辨率，因为改变它导致窗口的（像素）宽度改变，这可以利用他人所描述的方法来检测：

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

你还可以在浏览器中使用CSS Media Queries，以支持它们将页面样式调整为各种显示宽度，但如果您需要适当的灵活布局，则应该在您的CSS中使用em单位和百分比，min-width和max-width。 Gmail可能会使用所有这些组合。

Answer 5

您也可以使用平原Javascript window.innerWidth来比较宽度。

但使用jQuery的.resize()自动为您触发：

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

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

Answer 6

你让一个DIV某个页面上，并把这个代码：

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

这里是一个片段：

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>

当然，适应它以适应您的需求！ ;）