如何使用jQuery检测窗口大小

How can I detect window size with jQuery?

本文关键字：窗口大小 检测 jQuery 何使用      更新时间：2023-09-26

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

任何想法都将不胜感激。

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

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

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

您在页面上的某个地方创建一个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>

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

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

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

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

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

是否要检测窗口的大小调整？

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

//get dimensions 
var height = $(window).height();
var width = $(window).width();
//refresh on resize
$(window).resize(function() {
  location.reload(true)
});

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

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

但使用jQuery的.resize()自动为您开火：

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

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

相关文章：