我如何检测jQuery的窗口大小?

如何使用jQuery(如Gmail)检测窗口/浏览器大小? 在Gmail中,只要在窗口设置中更改了窗口分辨率,我们不需要刷新或重新加载当前页面? 在我的项目中,一旦窗口设置被更改,我需要刷新浏览器。

任何想法将不胜感激。

您无法从网页中find显示分辨率。 它有一个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-widthmax-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(); 

要在浏览器resize时收到通知,请使用此绑定callback:

 $(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()自动为你.resize()

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

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