Включить/отключить javascript, используя Media Query

Question

У меня есть слайд, где я хочу показывать фотографии, специфичные для каждого устройства. iPhone, iPad, Desktop.

Я хотел бы использовать что-то подобное, чтобы фильтровать каждый из них. Очевидно отображения: нет, не будет работать, так как это JavaScript, но это лишь общее представление о том, как она должна работать:

<style type="text/css"> 
@media only screen and (min-width: 800px) { 
    #slide-desktop{display:block;} 
    #slide-ipad{display:none;} 
    #slide-iphone{display:none;} 
} 
@media only screen and (min-width: 481px) and (max-width: 799px) { 
    #slide-desktop{display:none;} 
    #slide-ipad{display:block;} 
    #slide-iphone{display:none;} 
} 
@media only screen and (max-width: 480px) { 
    #slide-desktop{display:none;} 
    #slide-ipad{display:none;} 
    #slide-iphone{display:block;} 
} 
</style> 
<div id="slide-desktop"> 
    <script> 
     $.vegas('slideshow', { 
     delay:6000, 
     backgrounds:[ 
     { src:'images/slide/desktop.jpg', fade:600 }, 
     ] 
     })('overlay'); 
    </script> 
</div> 
<div id="slide-ipad"> 
    <script> 
     $.vegas('slideshow', { 
     delay:6000, 
     backgrounds:[ 
     { src:'images/slide/ipad.jpg', fade:600 }, 
     ] 
     })('overlay'); 
    </script> 
</div> 
<div id="slide-iphone"> 
    <script> 
     $.vegas('slideshow', { 
     delay:6000, 
     backgrounds:[ 
     { src:'images/slide/iphone.jpg', fade:600 }, 
     ] 
     })('overlay'); 
    </script> 
</div> 

Answer 1

Если вы хотите запускать различные сценарии, основанные на запросе медиа вы можете использовать enquire.js

enquire.js представляет собой легкий, чистый библиотека JavaScript для ответа на CSS медиа-запросов.

Итак, вам не нужно ничего вводить в стиле.

Answer 2

Если вы хотите проверить на ширину устройства вы можете использовать простой JavaScript, как этот

if(window.innerWidth >= 800) 
    { 
    alert('desktop?'); 
    } 
    else if(window.innerWidth >= 481 && window.innerWidth < 799) 
    { 
    alert('ipad?'); 
    } 
    else if(window.innerWidth < 480) 
    { 
    alert('iphone?'); 
    } 

Но я не пошел бы на эту технику. Проверьте

What is the best way to detect a mobile device in jQuery?