僅在頁腳中包含jQuery腳本，僅在移動設備上並調整大小友好

-1

我正在嘗試合併jQuery plugin by Codrops - 這會使菜單變成左側和底部的欄。我想在桌面屏幕上使用與通常頂級欄相同的菜單，只需更改演示隨附的ID和類的樣式即可。我想知道什麼是最好的Javascript解決方案，包括最大寬度768插件的腳本，然後刪除它們的任何更大的。我希望它自行檢查並更新瀏覽器調整大小。這是我到目前爲止...僅在頁腳中包含jQuery腳本，僅在移動設備上並調整大小友好

<script> 
    (function() { 
if(window.innerWidth > 600) { 
    $.getSscript("assets/js/modernizr.custom.js"); 
    $.getSscript("assets/js/classie.js"); 
    $.getSscript("assets/js/borderMenu.js"); 
} 
})(); 
</script>

來源

2015-06-27 Jacob Buller

因此，我做了一些研究，我想我找到了一個替代的答案。它不會鏈接腳本，但可以將它們複製並粘貼到手機屏幕上調用的功能中。

以下是我在頁腳底部加入的代碼。我聯繫了所有必要的腳本上面這個代碼，以便它裝上所有屏幕尺寸（插件想出了一個自定義的modernizer.js和使用classie.js）

///////////////////////////////// 
    // MATCH MEDIA FOR MOBILE MENU // 
    ///////////////////////////////// 

    /* JavaScript Media Queries */ 
if (matchMedia) { 
    //*change this to whatever size screens you'd like, I wanted mine to only work on 768 or below 
    var mq = window.matchMedia("(min-width: 768px)"); 
    mq.addListener(WidthChange); 
    WidthChange(mq); 
} 

// media query change 
function WidthChange(mq) { 

    //* Put jQuery plugin's code here 


}

到目前爲止，它的偉大的工作。如果您注意到上述代碼中可能發生的任何變化，請告知我們。

感謝Craig Buckler of OptimalWorks.net爲他的偉大教程和示例代碼。

來源

2015-06-28 15:57:45

我遇到的唯一的其他問題是，當我調整屏幕大小時，jQuery有時不會執行。如果你知道解決方案，請分享 –

僅在頁腳中包含jQuery腳本，僅在移動設備上並調整大小友好

回答

相關問題