jQuery方向與$（窗口）.resize ooops

我想實現以下：我正在工作的網站在橫向模式下效果更好。我希望當設備開啓縱向時顯示一條消息，並且當橫向時消息不顯示。

我已經寫了，準備（）函數中，下面的代碼：

$(window).resize(function(){ 

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

    if(width>height) { 
     // Landscape 
     $("#landscape").css('display','none'); 
    } 
    else { 
     // Portrait 
     $("#landscape").css('display','block'); 
     $("#landscape").click(function(){ 
      $(this).hide(); 
     }); 
    }

但是當頁面加載（或我刷新它）它總是顯示消息（因爲它應該只在畫像模式）。如果我然後更改瀏覽器大小代碼開始工作，並相應地顯示/隱藏消息。我該如何解決這個問題？

謝謝！

來源

2013-03-06 Boguz Didgeridoo

呼叫.resize()後$(window).resize()：

$(window).resize(function(){ 

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

    if(width>height) { 
    // Landscape 
    $("#landscape").css('display','none'); 
    } else { 
    // Portrait 
    $("#landscape").css('display','block'); 
    $("#landscape").click(function(){ 
     $(this).hide(); 
    }); 
    } 
}).resize(); // <----this way

來源

2013-03-06 17:55:45 Jai

ahhh，完美！謝謝！ =） – 2013-03-06 17:59:12

當DOM準備就緒時觸發你的函數。

$(function() { 
    $(window).resize(); 
});

來源

2013-03-06 17:47:52

我試過了，但即使瀏覽器處於「風景模式」刷新時，我仍然收到消息... – 2013-03-06 17:55:24

...我還注意到，刷新該功能不起作用。當我點擊消息它不隱藏（但它隱藏然後當消息顯示在調整瀏覽器的大小時）... – 2013-03-06 17:57:58

就緒（）函數將只在負載火一次。您需要將這個功能放在就緒功能之外，並在加載時調用它，然後在窗口重新調整大小的情況下工作。

而且，使用$（窗口）.resize時，請確保您設置的時間延遲，以防止多個併發事件，這已經涵蓋了許多次：

JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?

不確定你的項目範圍是什麼，但是單純根據方向來處理項目通常被認爲是不好的做法;特別是在你的景觀功能（寬度>高度）。如果頁面寬度跨越1280和500高度怎麼辦？除非您也在使用設備檢測，否則您的邏輯並不總是成立。

來源

2013-03-06 17:58:20

謝謝。我做了媒體查詢，以便網站在縱向和橫向模式下都能正常工作。但我仍然希望通知用戶該設計在橫向上更好。則由用戶決定是否繼續縱向（單擊）以更改爲橫向（旋轉）。但是，謝謝你，這是一個不錯的提示... – 2013-03-06 18:03:24

jQuery方向與$（窗口）.resize ooops

回答

相關問題