用另一个脚本包装 JavaScript

Question

我想用另一行包装一个javascript函数，该行将确定脚本是否应该运行。关键是如果用户在移动设备上，则禁用主脚本。

我无法解决的是如何让它工作。

这是初始脚本

    <script>

    function init() {
        window.addEventListener('scroll', function(e){
            var distanceY = window.pageYOffset || document.documentElement.scrollTop,
                shrinkOn = 200,
                header = document.querySelector("header");
            if (distanceY > shrinkOn) {
                classie.add(header,"smaller");
            } else {
                if (classie.has(header,"smaller")) {
                    classie.remove(header,"smaller");
                }
            }
        });
            } 
    window.onload = init();
</script>

这是我想要包装它的脚本。

window.addEventListener('resize', function(){
    if(window.innerWidth > 568){
        ...execute script
    }
});

我将如何构建代码来实现这一点？

谢谢托比亚斯

Answer 1

如果我猜对了，添加应该就足够

了

if (window.innerWidth <= 568) return;

到 init 函数或事件处理程序的开头。

Answer 2

我建议使用enquire.js。

function init() {
  //your code …
}
enquire.register("screen and (min-width: 568px)", {
   match : init,  //always executing when media query is matched OR:
   setup : init,  //only triggered the first time the media query is matched, in combination with:
   deferSetup : true
});

Answer 3

您是否尝试过使用媒体查询？以下是一些链接：

根据媒体查询有条件地加载 JavaScript

使用媒体查询有条件地加载资源

希望这可以帮助您找到解决方案。