使用媒体查询启用/禁用javascript

时间:2013-11-01 21:43:48

标签: javascript html css

我有一张幻灯片,我想显示每台设备的特定照片。 iPhone,iPad,桌面。

我想用这样的东西来过滤每一个。显然:显示:由于它是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>

2 个答案:

答案 0 :(得分:1)

如果您想根据媒体查询运行不同的脚本,可以使用enquire.js

  

enquire.js是一个用于响应的轻量级纯JavaScript库   CSS媒体查询。

所以,你根本不需要放任何风格。

答案 1 :(得分:1)

如果您想通过设备宽度进行检查,可以使用像这样的简单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?