[英]JS or jQuery or window resize or when window width is less than npx
如何检测用户何时调整浏览器窗口大小?
我正在寻找一个脚本,当用户调整窗口大小或窗口宽度小于例如900px时进行somenthing。
您可以订阅窗口调整大小事件,如下所示:
$(window).on("resize", function(event){
console.log( $(this).width() );
});
请注意这一点,因为当宽度小于n时执行代码的if语句在调整满足这些条件的窗口时会执行该代码的次数是荒谬的。 最好设置一些标志或为文档添加类,并使这些部分成为您的条件。
但是,你所问的听起来最适合用CSS Media Queries来解决。 例如,如果我们想在窗口小于900px时更改主体背景颜色:
@media screen and (max-width: 900px) {
body {
background: #ccc;
}
}
对于旧版本的IE,甚至还有一个很好的polyfill: https : //github.com/scottjehl/Respond
jQuery的:
$(window).resize(function() {
//do something
var width = $(document).width();
if (width < 900) {
// do something else
}
});
您可以使用$(window).resize()
,如下所示
$(window).resize(function() {
if($(this).width() < 900)
//do whatever you want
});
这是$ .resize的文档
$(window).resize(function() {
$('body').prepend('<div>' + $(window).width() + '</div>');
// Do stuff
});
根据您的需要,当窗口大小小于900px时,这可以处理:
$(window).on("resize", function(event){
console.log('User is using resize!');
var w = $(this).width();
if(w < 900)
console.log('Your window is ' + w + 'px (less than 900px)');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.