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

【问题标题】：How can I detect window size with jQuery?如何使用 jQuery 检测窗口大小？
【发布时间】：2011-10-17 03:16:55
【问题描述】：

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

任何想法都会受到赞赏。

【问题讨论】：

我认为我们不能。但是我们可以通过使用来获取窗口的大小：document.body.clientWidth/clientHeight
更新：我错了。你可以 screen.width 和 screen.height

【解决方案1】：

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

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

您也可以在支持 CSS 媒体查询的浏览器中使用它们来调整页面样式以适应各种显示宽度，但如果您真的应该在 CSS 中使用 em 单位和百分比以及 min-width 和 max-width想要一个适当的灵活布局。 Gmail 可能结合了所有这些。

【讨论】：

感谢调整大小，但$(window).resize 不适用于安卓电视！最佳使用 setInterval 无需时间即可正常工作。 ;)

【解决方案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>

这是一个sn-p：

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>

当然，根据您的需要进行调整！ ;)

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

您想检测窗口何时被调整大小吗？

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

【讨论】：

【解决方案5】：

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

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

不确定您是想修改元素的尺寸还是真正刷新页面。所以这里有一堆不同的东西选择你想要的。如果你真的想要，你甚至可以将高度和宽度放在调整大小事件中。

【讨论】：

如果您在调整大小时刷新，则每次在移动网络浏览器上滚动时都会刷新页面，因为地址栏隐藏时屏幕会变大。

【解决方案6】：

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

但是使用 jQuery 的 .resize() 会自动为你触发：

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

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

【讨论】：