Responsive Javascript文件？

Question

我已經使用jQuery Mobile UI構建了我的移動網站，但是現在我意識到我需要一些功能與它和我的桌面站點不同（日期選擇器日期應該在桌面站點上更長，等等）。

我已經看着Modernizr和matchMedia來幫助我加載單獨的js文件，但我無法弄清楚它的響應工作的好方法。 Modernizr只能在初始加載時運行（除非我在文檔中遺漏了某些內容），並且在匹配媒體跨越最小/最大寬度閾值時執行多次時遇到問題。它有時有效，但麻煩在於添加/刪除單獨的js文件。除此之外（但不是一個大問題 - 我不這麼認爲），當從另一個腳本加載腳本到DOM時，Chrome會引發錯誤。

最好的辦法是寫一個js文件，然後添加一個偵聽器，例如$.mobile.media("screen and (min-width: XXXpx)")到身體的寬度，改變我需要的值？

我可能會作出這樣太難爲自己，或缺少明顯的東西，因爲我試圖保持HTTP請求和網站規模儘可能小，但我想不出這一個很好的解決方案。

謝謝！

閃電回合獎金問題：這是好做法/正確保留所有的jQuery Mobile的樣式（data-roledata-iddata-theme）切換到桌面網站後？它看起來非常糟糕......只有某個人只能在更大的屏幕上觀看它。

Answer 1

恕我直言，最好的辦法是在你的JavaScript中引入一些標誌，例如「isMobile」，「isTablet」或「isDesktop」，它將在你的「pageinit」事件中附加一個方法Web應用程序。之後，您可以檢查標誌，以便在代碼的特定部分中使用適當的版本進行相應的操作。

您可以檢查標誌的方式取決於您的體系結構。在我現在正在工作的項目，我提取通過在頁面的主體後端連接一類的信息，但那是因爲我們有信息。您可以嘗試使用類似Harvey的庫來觀察將觸發的媒體查詢，並相應地設置標誌。我不認爲你的選擇在這裏結束，但恐怕我無法幫助你更多！