根據屏幕寬度隱藏正確的內容

當我在文件中使用下面的代碼。根據屏幕寬度隱藏正確的內容

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

根據屏幕寬度隱藏正確的內容

回答

相關問題