與移動網站jQuery問題

我有一個關於JQuery的問題。我試圖設計我的網站的移動部分，我遇到了一個錯誤。所以我有3種不同的屏幕尺寸（480，平板電腦類型和默認）的CSS。移動版本中有更多的jQuery的瓷磚佈局，但我只希望它能與移動480屏幕尺寸一起工作。我這樣做，這個與移動網站jQuery問題

$(document).ready(function() { 
    if ($(window).width() < 481) {

我發現的bug是，如果我我的手機上，並加載在縱向模式下的部位，然後打開我的屏幕去風景模式中，CSS更新正確以便它doesn」不再使用tile類型，而是使用更多的列，但是jQuery仍在工作，我可以在其中切換不想切換爲該大小的事物，只有切片設置。無論如何要做到這一點？如果我在橫向模式下加載我的網站的jQuery不加載（這是好事），它只是當我切換。我知道這是因爲它檢查頁面加載時的屏幕大小，但任何人都有解決方法的想法？

來源

2013-07-02 ajk4550

再次運行權做的代碼觸發之前。 –

你是否在同一分辨率的CSS上運行媒體查詢？ – bzupnick

是的，它的CSS工程很好，但我有jQuery做一些切換，以使其更容易在移動版本，但這意味着我切換到橫向模式時，我的一些內容丟失，因爲你必須切換到那裏 – ajk4550

由於您使用的是相同分辨率的媒體查詢，因此我會這樣做。

在你的jquery中，測試一個媒體查詢的變化。例如，假設你有這樣的：

@media (max-width: 480px) { 
     #someDiv { 
      display:none; 
    } 
}

在你JQuery的，那麼你可以這樣做：通過你的`if`測試

if($("#someDiv").css("display") == "none") { 
    // do whatever you want in Javascript that will only be run if that css media query is triggered 
}

來源

2013-07-02 20:10:33 bzupnick

測試對於媒體查詢改變聽起來正是我需要做的，你能解釋一下嗎？不聽起來啞巴，但如果我設置顯示：無;它不會顯示？ – ajk4550

這只是如何在JavaScript中查看您的媒體查詢是否已觸發的示例。我不是那個意思。在你的JS測試中，你在媒體查詢中確實發生了變化。 – bzupnick

哈哈oopps！謝謝，那有效 – ajk4550

與移動網站jQuery問題

回答

相關問題