根据屏幕宽度隐藏正确的内容

当我在文件中使用下面的代码。根据屏幕宽度隐藏正确的内容

var width=jQuery(window).width(); 
    if(width<980){ 
     jQuery('.std .home-right').hide(); 
    }else{ 
    jQuery('.std .home-right').show(); 
    }

当我调整窗口宽度小于980px，所述.STD。家里右不能隐藏，当我调整窗口宽度小于980px到大于980，则.STD。家里右无法显示。为什么？

来源

2013-01-21 learn116

你能包括事件处理程序的代码？你如何检测窗口大小？ – mrtsherman

你是否在窗口大小调整事件中调用了这个？你可以显示这个代码被调用的地方吗？ – ryadavilli

我不知道如何检测窗口大小。谢谢 – learn116

您需要监视resize事件。

$(window).resize(function() { 
    var width = $(window).width(); 
    console.log(width); 
    if (width < 500) { 
    $('.std .home-right').hide(); 
    } else { 
    $('.std .home-right').show(); 
    } 
});

http://jsfiddle.net/C2Kx9/

来源

2013-01-21 04:14:09 mrtsherman

我使用代码到ipad设备，如果屏幕是400x300，请执行$（'。std .home右汉字'）隐藏（）;好？ – learn116

如果你问iOS设备是否可以运行JavaScript ...那么是的。然而，更大的图片，听起来像你正在使用它来检测移动设备，以优化显示。如果是这种情况，那么使用@Bowie – mrtsherman

对于你的情况，而不是jQuery的，使用宽度检测在样式表可以更简单：

添加以下在你的CSS：

@media all and (min-width: 980px) { .std .home-right { display:none; } } 

@media all and (max-width: 979px) { .std .home-right { display:block; } }

希望这有助于。

来源

2013-01-21 04:14:05 Bowie

不错，我喜欢它。 – mrtsherman

这是css3吗？ @media all和（min-width：980px）是什么意思？ – learn116

是的，css3支持的媒体类型。看看这个参考：http：//www.w3.org/TR/CSS2/media.html – Bowie

添加$(window)调整大小事件，像这样：

function setWidth(){ 
    var width = $(window).width(); 
    if(width < 980){ 
     jQuery('.std .home-right').hide(); 
     console.log(1); 
    } else { 
     jQuery('.std .home-right').show(); 
     console.log(2); 
    } 
} 
$(document).ready(function(){ 
    setWidth(); 
}); 
$(window).resize(function(){ 
    setWidth(); 
});

来源

2013-01-21 04:14:12 jikey

你做了什么（希望在文件准备好）刚刚设置的浏览器的宽度。如果你想让它工作，同时调整大小，你需要做这样的事情;

$(window).resize(function() { 

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

    if (width < 980) { 
     $('.std .home-right').hide(); 
    } else { 
     $('.std .home-right').show(); 
    } 

});

这将导致浏览器隐藏并显示所需的元素。但是，在你走之前便可以直接倾倒在该代码，我可以建议有一个看这个页面首次

http://benalman.com/code/projects/jquery-throttle-debounce/examples/throttle/

Resize事件会产生许多事件，这通常被认为是一件坏事。

来源

2013-01-21 04:14:52 whitneyit

的解决方案，我使用代码到ipad设备，如果屏幕是400x300，请执行$（'。std .home-right'）。好？ – learn116

你应该写这样的代码窗口大小调整功能，这样

$(window).resize(function() { 
var width=jQuery(window).width(); 
    if(width<980){ 
     jQuery('.std .home-right').hide(); 
    }else{ 
    jQuery('.std .home-right').show(); 
    } 
});

这可能对您有用

来源

2013-01-21 04:22:42 muthu

根据屏幕宽度隐藏正确的内容

回答

相关问题