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

【问题标题】：hide the right content according to the screen width根据屏幕宽度隐藏正确的内容
【发布时间】：2013-01-04 03:19:47
【问题描述】：

当我在文件中使用以下代码时。

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

当我将窗口宽度调整为小于 980 像素时，.std .home-right 无法隐藏，当我将窗口宽度小于 980 像素调整为大于 980 时，.std .home-right 无法显示.为什么？

【问题讨论】：

能否包含您的事件处理程序代码？你是如何检测窗口调整大小的？
你是在窗口调整大小事件上调用这个吗？你能说明这段代码是从哪里调用的吗？
我不知道如何检测窗口调整大小。谢谢
什么是.sid .home-right？如果它们是相同 div 的类，则可以使用其中一个类。否则用逗号分隔它们 jQuery('.std , .home-right').hide();
Detect when a window is resized using JavaScript ? 的可能重复项

标签： jquery

【解决方案1】：

你应该像这样在窗口调整大小函数中编写这段代码

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

这可能对你有用

【讨论】：

【解决方案2】：

对于您的情况，在样式表中使用宽度检测代替 jquery 可能更简单：

在你的 CSS 中添加以下内容：

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

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

希望对您有所帮助。

【讨论】：

这是css3吗？ @media all and (min-width: 980px) 是什么意思？
是的，css3支持的媒体类型。看看这个以供参考：w3.org/TR/CSS2/media.html

【解决方案3】：

您所做的是（希望文档准备好）只需设置浏览器的宽度。如果你希望它在调整大小的同时工作，你需要做这样的事情；

$( 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 事件会产生很多事件，这通常被认为是一件坏事。

【讨论】：

i使用code到ipad设备，如果屏幕是400x300，做$('.std .home-right').hide();好吗？

【解决方案4】：

添加$(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();
});

【讨论】：

【解决方案5】：

你需要监听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/

【讨论】：

i使用code到ipad设备，如果屏幕是400x300，做$('.std .home-right').hide();好吗？
如果您询问 iOS 设备是否可以运行 javascript... 那么可以。但是，从更大的角度来看，听起来您正在使用它来检测移动设备以优化显示。如果是这种情况，请使用@Bowie 的解决方案