다른 화면 크기에 대해 조건부로 다른 자바 스크립트 제공

Question

내가 볼 수있는 한, 이에 대한 합의 또는 확실한 대답이없는 것 같습니다.

전체 화면으로로드 할 때 많은 종 (특히 12 개의 슬라이드가있는 멋진 슬라이드 쇼를 표시하는 Themepunch '회전 슬라이더')이 울리는 & 휘파람을 피고 싶습니다. 모바일 화면에서이를 완전히 숨기고 싶습니다. 따라서 자바 스크립트를 제공하거나 실행하여 대역폭을 낭비하고 싶지 않습니다.

나는 내가 Modernizr.mq() 메소드를 사용하여 추측이에 대한 Modernizr를 사용하여보고하고, 뭔가 같은 :

이

a)이 A는 :

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

난에 사람의 의견을 환영 실행 가능한 옵션? 더 좋은 방법이 있습니까? B) 내가 예를 들어, 모더 나이저의로드 기능이 결합 할 수 있습니다 :

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

지금 필요한 좋게 작업 할 것 같다 다음과 같은 방법을 사용하고 있습니다 :`시험 그들이 사용하는 [YepNope] (http://yepnopejs.com/) 문서에서

 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. 
     });    

Answer 2

wurlf을 사용하면 현재 사용중인 플랫폼을 확인할 수 있습니다. 모듈을로드하려면 require.js을 사용하십시오.

Answer 3

당신은

<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 코드

경고 ("TEST1")를이 코드를 시도 할 수 있습니다;

test2.js 코드

alert ("test2");