JQuery: 如何动态检测窗口宽度？

小开

将 if 条件放在 resize函数中:

var windowsize = $(window).width();


$(window).resize(function() {
windowsize = $(window).width();
if (windowsize > 440) {
//if the window is greater than 440px wide then turn on jScrollPane..
$('#pane1').jScrollPane({
scrollbarWidth:15,
scrollbarMargin:52
});
}
});

小开

最佳答案

更改变量并不能神奇地执行 if块中的代码。将公共代码放在函数中，然后绑定事件，并调用函数:

$(document).ready(function() {
// Optimalisation: Store the references outside the event handler:
var $window = $(window);
var $pane = $('#pane1');


function checkWidth() {
var windowsize = $window.width();
if (windowsize > 440) {
//if the window is greater than 440px wide then turn on jScrollPane..
$pane.jScrollPane({
scrollbarWidth:15,
scrollbarMargin:52
});
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});

小开

我不知道这对你调整页面大小是否有用:

$(window).resize(function() {
if(screen.width == window.innerWidth){
alert("you are on normal page with 100% zoom");
} else if(screen.width > window.innerWidth){
alert("you have zoomed in the page i.e more than 100%");
} else {
alert("you have zoomed out i.e less than 100%");
}
});

小开

下面是我所做的，当屏幕大小低于768px 时隐藏一些 Id 元素，当屏幕大小高于768px 时显示出来。效果很好。

var screensize= $( window ).width();


if(screensize<=768){
if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
{
$('#column-d0f6e77c699556473e4ff2967e9c0251').css('display','none');
}
}
else{
if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
{
$('#column-d0f6e77c699556473e4ff2967e9c0251').removeAttr( "style" );
}


}
changething = function(screensize){
if(screensize<=768){
if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
{
$('#column-d0f6e77c699556473e4ff2967e9c0251').css('display','none');
}
}
else{
if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
{
$('#column-d0f6e77c699556473e4ff2967e9c0251').removeAttr( "style" );
}


}
}
$( window ).resize(function() {
var screensize= $( window ).width();
changething(screensize);
});