Javascript 如何使用 jQuery 检测窗口大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7789043/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I detect window size with jQuery?
提问by PPShein
How can I detect window/browser size with jQuery like Gmail? In Gmail, we don't need to refresh or reload current page as soon as we have changed window resolution in window setting? In my project, I need to refresh the browser as soon as window setting has been changed.
如何使用像 Gmail 这样的 jQuery 检测窗口/浏览器大小？在 Gmail 中，我们不需要在窗口设置中更改窗口分辨率后立即刷新或重新加载当前页面？在我的项目中，我需要在更改窗口设置后立即刷新浏览器。
Any idea will be appreciated.
任何想法将不胜感激。
回答by Félix Saparelli
You cannot really find the display resolution from a web page. There isa CSS Media Queries statement for it, but it is poorly implemented in most devices and browsers, if at all. However, you do not need to know the resolution of the display, because changing it causes the (pixel) width of the window to change, which canbe detected using the methods others have described:
您无法真正从网页中找到显示分辨率。这里是它一个CSS媒体查询语句，但它在大多数设备和浏览器中执行不力的，如果在所有。但是，您不需要知道显示器的分辨率，因为更改它会导致窗口的（像素）宽度发生变化，这可以使用其他人描述的方法检测到：
$(window).resize(function() {
// This will execute whenever the window is resized
$(window).height(); // New height
$(window).width(); // New width
});
You can also use CSS Media Queries in browsers that support them to adapt your page's style to various display widths, but you should really be using emunits and percentages and min-widthand max-widthin your CSS if you want a proper flexible layout. Gmail probably uses a combination of all these.
您还可以使用CSS媒体查询在支持他们到你的页面的风格适应各种显示宽度的浏览器，但你确实应该使用em单位和百分比，并min-width和max-width你的CSS如果你想要一个适当的灵活的布局。Gmail 可能综合使用了所有这些。
回答by Ivijan Stefan Stipi?
You make one div somewhere on the page and put this code:
你在页面上的某个地方创建一个 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>
Here is a snippet:
这是一个片段：
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>Of course, adapt it to fit your needs! ;)
当然，调整它以满足您的需求！;)
回答by cocoahero
You can get the values for the width and height of the browser using the following:
您可以使用以下方法获取浏览器的宽度和高度值：
$(window).height();
$(window).width();
To get notified when the browser is resized, use this bind callback:
要在浏览器调整大小时收到通知，请使用此绑定回调：
$(window).resize(function() {
// Do something
});
回答by ANeves
回答by Richard Andrew Lee
//get dimensions
var height = $(window).height();
var width = $(window).width();
//refresh on resize
$(window).resize(function() {
location.reload(true)
});
not sure if you wanted to tinker with the dimensions of elements or actually refresh the page. so here a bunch of different things pick what you want. you can even put the height and width in the resize event if you really wanted.
不确定您是想修改元素的尺寸还是实际刷新页面。所以这里有一堆不同的东西选择你想要的。如果您真的需要，您甚至可以将高度和宽度放在调整大小事件中。
回答by Bradley Flood
You could also use plain Javascript window.innerWidthto compare width.
您也可以使用普通的 Javascriptwindow.innerWidth来比较宽度。
But use jQuery's .resize()fired automatically for you:
但是使用 jQuery.resize()为您自动触发：
$( window ).resize(function() {
// your code...
});
