javascript - Media Query を使用して JavaScript を有効/無効にする

Question

各デバイス固有の写真を表示したいスライドがあります。iPhone、iPad、デスクトップ。

このようなものを使用して、それぞれをフィルター処理したいと思います。明らかに、display:none は 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>