Question

据我所知，似乎没有就此达成共识或明确答案。

我正在建立一个响应式网站，当我在全屏幕上加载时，我希望有很多铃声和口哨（特别是Themepunch'革命滑块'，它将显示12张左右幻灯片的精美幻灯片）。我想从移动屏幕中完全隐藏它，因此，我不想通过提供或执行任何与之相关的JavaScript来浪费带宽。

我正在考虑使用Modernizr，我想使用Modernizr.mq（）方法，如：

if(Modernizr.mq('all and (min-width: 320px)')) {
    // Import external javascript files and execute code relating to slider
}

我欢迎任何人的意见：

a）这是一个可行的选择吗？有没有更好的办法？ b）我可以将它与Modernizr的加载函数结合起来，例如：

Modernizr.load({
  test: Modernizr.bigScreen, // or.. something? Is there anything in the Modernizr object regarding screen size? Can I add my own using the mq() method first?
  yep : 'rev-slider.js',
  nope: 'basic.js'
});

提前致谢。

Answer 1

您可以使用wurlf来检查您的平台。并使用require.js加载模块。

Answer 2

您可以尝试使用此代码

   <script>
        window.onload = function(){
            function loadJs(filesrc){
                var ele = document.createElement("script");
                ele.setAttribute("type","text/javascript");
                ele.setAttribute("src", filesrc);
                document.getElementsByTagName("head")[0].appendChild(ele);

            }
            if(window.innerWidth > 320){ //your screen size conditions
                loadJs("js/test1.js");
            }else{
                loadJs("js/test2.js");
            }

        };
    </script>

test1.js代码

警报（ “测试1”）;

test2.js代码

警报（ “test2的”）;

Answer 3

我现在正在使用以下方法，这似乎可以很好地完成所需的工作：

        var bigScreen = false;

        if(Modernizr.mq('all and (min-width: 500px)')) {
            var bigScreen = true;
        }

        Modernizr.load({
            test: bigScreen,
            yep : 'scripts/desktop.js', // put all your JS for fullscreen magic in this file.
            nope: 'scripts/mobile.js' // ...and all your mobile-specific stuff here.
        });

有条件地为不同的屏幕尺寸提供不同的javascript

3 个答案: