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

Question

如何使用jQuery之类的Gmail检测窗口/浏览器大小？ 在Gmail中，我们在窗口设置中更改窗口分辨率后，无需刷新或重新加载当前页面？ 在我的项目中，我需要在窗口设置更改后立即刷新浏览器。

任何想法将不胜感激。

Answer 1

您无法从网页中找到显示分辨率。 这里是它的一个CSS媒体查询语句，但它在大多数设备和浏览器中执行不力的，如果在所有。 但是，您不需要知道显示器的分辨率，因为更改它会导致窗口的（像素）宽度发生变化，这可以使用其他人描述的方法进行检测：

$(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 2

你在页面的某个地方创建一个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(){ var h=$(window).height(), w=$(window).width(); $("#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> 

当然，根据您的需求进行调整！ ;）

Answer 3

您可以使用以下方法获取浏览器宽度和高度的值：

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

要在调整浏览器大小时收到通知，请使用此绑定回调：

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

Answer 4

您想要检测窗口调整大小的时间吗？

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

Answer 5

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

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

不确定您是否想要修改元素的尺寸或实际刷新页面。 所以这里有很多不同的东西选择你想要的东西。 如果你真的想要，你甚至可以把高度和宽度放在resize事件中。

Answer 6

您还可以使用普通的Javascript window.innerWidth来比较宽度。

但是使用jQuery的.resize()自动为你启动：

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

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