[英]Enable/Disable javascript using Media Query
I have a slide where I want to show photos specific for each device. 我有一张幻灯片,我想显示每个设备的特定照片。 iPhone, iPad, Desktop.
iPhone,iPad,桌面。
I would like to use something like this to filter each out. 我想用这样的东西来过滤每一个。 Obviously display:none isn't going to work since it's JavaScript, but this is just a general idea of how it should work:
显然:显示:由于它是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>
If you want to run different scripts based on a media query you can use enquire.js 如果要基于媒体查询运行不同的脚本,可以使用enquire.js
enquire.js is a lightweight, pure JavaScript library for responding to CSS media queries.
enquire.js是一个轻量级的纯JavaScript库,用于响应CSS媒体查询。
So, you no need to put anything in a style at all. 所以,你根本不需要放任何风格。
If you want to check by the device width you can use simple javascript like this 如果你想通过设备宽度检查,你可以使用像这样的简单的JavaScript
if(window.innerWidth >= 800)
{
alert('desktop?');
}
else if(window.innerWidth >= 481 && window.innerWidth < 799)
{
alert('ipad?');
}
else if(window.innerWidth < 480)
{
alert('iphone?');
}
But I would not go for this technique. 但我不会采用这种技术。 Check out
查看
What is the best way to detect a mobile device in jQuery? 在jQuery中检测移动设备的最佳方法是什么?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.