加載並考慮使用CSS媒體查詢卸載的JavaScript

我使用CSS媒體查詢讓我的網站響應：加載並考慮使用CSS媒體查詢卸載的JavaScript

@media (min-width:1200px) { 
    // DESKTOP STYLING 
} 

@media (max-width:1200px) { 
    // MOBILE STYLING 
}

我用https://github.com/paulirish/matchMedia.js檢查媒體查詢

if(min-width:1200px) { 
    // DESKTOP JAVASCRIPT 
} else { 
    // MOBILE JAVASCRIPT 
}

所以最初一切工作正常，當我的屏幕是< 1200px它顯示移動版本，如果它更高，它顯示桌面版本（JavaScript的作品以及）。

現在的問題是，當我開始調整，例如窗口：

1) LOADS DESKTOP JAVASCRIPT (EVERYTHING IS FINE) 
2) RESIZE WINDOW < 1200px (SWITCH TO MOBILE TEMPLATE) 
    LOADS MOBILE JAVASCRIPT (SITE BREAKS) 
3) RESIZE WINDOW > 1200px (SWITCH TO DESKTOP TEMPLATE) 
    LOADS DESKTOP JAVASCRIPT A SECOND TIME (SITE BREAKS EVEN MORE)

所以我想知道的任何想法如何「卸載」的JavaScript，或者一個優雅的方式有兩個不同的JavaScript文件讀取取決於哪些媒體查詢被使用？

來源

2012-03-30 jay7

也許嘗試使用jQuery Mobile。 http://jquerymobile.com/ ...另外從技術上講，您不需要使用JavaScript來使網站響應。它可以用CSS和流體佈局來完成。您能否詳細闡述一下JavaScript如何發揮作用？ – 2012-03-30 19:42:58

那麼，我不使用JavaScript來使網站響應。我只是通過CSS（媒體查詢，我已經設計了兩個單獨的模板）來做到這一點。但由於移動版和桌面版使用相同的DOM元素，因此JavaScript仍會嘗試運行幻燈片演示。這是導致移動版本中大多數交互式元素被簡化的一個問題。因此，而不是幻燈片，你只是有靜態圖像。 – jay7 2012-03-30 22:59:49

好的，我明白了。對不起，我誤解了你的全部情況。 – 2012-03-31 20:31:16

首先，你可以有一個JavaScript的（加入2一起），並有一個控制器，如果你的窗口尺寸大於或不將驗證比1200

或者你可以嘗試將javascipt的文件包裝成兩個對象，並創建第三個將作爲控制器處理。通過Ajax，您可以加載和卸載文件（因爲您的控制器仍然在那裏，所以沒有任何中斷）並在它們之間切換。這是一個問題，因爲當你製作這個開關時，你將不得不刪除所有的監聽器，並且你將不得不加載另一個文件，這將花費很少的時間。

希望這會有所幫助。順便說一句好的問題。

來源

2012-03-30 20:04:01 helly0d

感謝您的回覆，helly0d。呃有點希望有一個更簡單的方法來做到這一點。但我想這是唯一的方法。如果javascript文件非常小，那麼不會有問題，我還必須解除所有處理程序的綁定。看起來像一個簡單的開關非常多的額外的代碼:) – jay7 2012-03-30 23:02:11

爲什麼你需要兩種不同尺寸的腳本？你不能使腳本的功能儘可能通用並設置它們的參數嗎？或者你是否通過這兩個腳本加載不同的HTML控件？ – helly0d 2012-03-30 23:57:33

我會推薦一個類似Enquire.js的圖書館，你可以隨時自己編寫觸發器，但如果你有「桌面幻燈片」和「移動幻燈片」，你需要確保你銷燬不活動的調整大小和查詢有一個很好的API，包括一個不匹配的觸發器。

我正在處理我的「桌面幻燈片」和「移動幻燈片」的相同幻燈片插件，但想要不同的設置（例如 - 使用底部對齊的尋呼機與下一個/上一頁導航），這很容易設置頁面加載，但如果設備更改方向更改等媒體查詢斷點怎麼辦？

來源

2013-05-02 17:44:53

加載並考慮使用CSS媒體查詢卸載的JavaScript

回答

相關問題