Условно обслуживающий различные javascript для разных размеров экрана

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 
} 

Я хотел бы приветствовать взгляды ничьи на:

а) Является ли это жизнеспособный вариант? Есть ли способ лучше? б) Можно ли совместить это с функцией нагрузки 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

Я сейчас, используя следующий метод, который, кажется, чтобы сделать необходимую работу хорошо:

 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 код

оповещения ("test2");