仅在移动设备上的页脚处包含 jQuery 脚本，并且调整大小友好

Question

我正在尝试合并一个 jQuery plugin by Codrops - 使菜单变成左侧和底部的栏。我想在桌面屏幕上使用与通常顶部栏相同的菜单，只需更改演示附带的 id 和类的样式。我想知道什么是最好的 Javascript 解决方案，以在 768 的最大宽度上包含插件的脚本，然后在更大的宽度上删除它们。我也希望它能够在浏览器调整大小时进行自我检查和更新。这是我目前所拥有的...

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

Answer 1

所以我做了一些研究，我想我找到了另一个答案。它没有 link 脚本，但您可以将它们复制并粘贴到移动屏幕上调用的函数中。

下面是我在页脚底部合并的代码。我 link 在这段代码之上编辑了所有必要的脚本，因此它可以加载到所有屏幕尺寸上（该插件带有自定义 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 提供的精彩教程和示例代码。

仅在移动设备上的页脚处包含 jQuery 脚本，并且调整大小友好

Include jQuery script at footer only on mobile and resize friendly

jquery

media-queries

matchmedia