Jquery 禁用移动设备上的colorbox

我在我的响应式web项目中使用了colorbox，我根据需要对它进行了一些调整，它看起来很棒，但是当我在移动设备上打开它时，它看起来比缩略图小，所以我需要在小屏幕上禁用colorbox。我尝试过其他网站的一些解决方案，但我无法使其工作。有人能帮忙吗

这是我的原创剧本：

    <script src="js/jquery.colorbox.js"></script>
<script>
        $(document).ready(function(){   

        //Examples of how to assign the Colorbox event to elements
        $(".group1").colorbox({rel:'group1'});
        $(".group2").colorbox({rel:'group2'});
        $(".group3").colorbox({rel:'group3'});

        $.colorbox.settings.maxWidth  = '98%';
        $.colorbox.settings.maxHeight = '98%';
        $.colorbox.settings.speed = 200;

        $(window).resize(function(){
        // Resize Colorbox when resizing window or changing mobile device orientation
        resizeColorBox();
        window.addEventListener("orientationchange", resizeColorBox, false);
        });

        var resizeTimer;
        function resizeColorBox() {
        if (resizeTimer) {
        clearTimeout(resizeTimer);
        }
        resizeTimer = setTimeout(function() {
        if (jQuery('#cboxOverlay').is(':visible')) {
        jQuery.colorbox.reload();
        }}, 300);}  
    });
</script>

$（文档）.ready（函数（）{
//如何将Colorbox事件指定给元素的示例
$（“.group1”）.colorbox（{rel:'group1'}）；
$（“.group2”）.colorbox（{rel:'group2'}）；
$（“.group3”）.colorbox（{rel:'group3'}）；
$.colorbox.settings.maxWidth='98%'；
$.colorbox.settings.maxHeight='98%'；
$.colorbox.settings.speed=200；
$（窗口）。调整大小（函数（）{
//调整窗口大小或更改移动设备方向时调整Colorbox的大小
调整ColorBox（）的大小；
window.addEventListener（“方向更改”，resizeColorBox，false）；
});
var树脂定时器；
函数resizeColorBox（）{
if（resizeTimer）{
clearTimeout（resizeTimer）；
}
resizeTimer=setTimeout（函数（）{
if（jQuery（'#cboxOverlay'）.is（':visible'））{
jQuery.colorbox.reload（）；
}}, 300);}  
});

这是html（我正在测试colorbox）：

这是我尝试过的解决方案之一：

$（文档）.ready（函数（）{
if（window.matchMedia）{
//建立媒体检查（web解决方案）
width481Check=window.matchMedia（（最大宽度：481px））；
如果（宽度481检查匹配项）{
$.colorbox.remove（）；
}}  
//如何将Colorbox事件指定给元素的示例
$（“.group1”）.colorbox（{rel:'group1'}）；
$（“.group2”）.colorbox（{rel:'group2'}）；
$（“.group3”）.colorbox（{rel:'group3'}）；
$.colorbox.settings.maxWidth='98%'；
$.colorbox.settings.maxHeight='98%'；
$.colorbox.settings.speed=200；
$（窗口）。调整大小（函数（）{
//调整窗口大小或更改移动设备方向时调整Colorbox的大小
调整ColorBox（）的大小；
window.addEventListener（“方向更改”，resizeColorBox，false）；
});
var树脂定时器；
函数resizeColorBox（）{
if（resizeTimer）{
clearTimeout（resizeTimer）；
}
resizeTimer=setTimeout（函数（）{
if（jQuery（'#cboxOverlay'）.is（':visible'））{
jQuery.colorbox.reload（）；
}}, 300);}  
});

---

这一个使用matchMedia，但我不能让它工作。有什么解决方案吗？

如果窗口的大小符合您的需要，您可以设置颜色框，不是吗？谢谢您的回复，但我刚刚开始工作，似乎我把新代码放在了错误的脚本顺序上。它不是很优雅，但当我调整浏览器窗口的大小时，它确实起到了作用。这就是：我仍然需要在acutal移动设备上测试这一点。但是有一个新的小问题，在您的帮助下，它可能会被修复。在减少浏览器窗口并禁用colorbox之后，即使我再次最大化浏览器窗口，它也会保持禁用状态。有没有办法扭转这种情况，在我通过最小宽度时使其可用？我认为在重新启用colorbox时，您给出了错误的

rel

值？我用你的方式试过了。它使用的是正确的

rel

值。您能告诉我我在JSFIDLE plz中哪里做错了吗？在第7、8、9行中，您正在使用

group1

css类为选择器激活colorbox，但在第50行中重新启用它时，您正在使用

colorbox

css类为选择器。对不起，我迟了回答。

    <div id="test" class="one-third column">
               <a class="group1" href="images/portfolio/aproval-tree.png" title="test">
               <img class="fade" src="images/portfolio/aproval-tree.png" style="background-image:url(images/portfolio/zoom_full.png);"></a>
               <a class="group1" href="images/portfolio/dyrup/dyrup_ad.png" title="test"><img style="display:none"></a>
               <a class="group1" href="images/portfolio/dyrup/dyrup_outdoor.png" title="test"><img style="display:none"></a>
        </div>

    <script src="js/jquery.colorbox.js"></script>
<script>
        $(document).ready(function(){

        if (window.matchMedia) {

        // Establishing media check (web solution)
        width481Check = window.matchMedia("(max-width: 481px)");
        if (width481Check.matches){
            $.colorbox.remove();
        }}  

        //Examples of how to assign the Colorbox event to elements
        $(".group1").colorbox({rel:'group1'});
        $(".group2").colorbox({rel:'group2'});
        $(".group3").colorbox({rel:'group3'});

        $.colorbox.settings.maxWidth  = '98%';
        $.colorbox.settings.maxHeight = '98%';
        $.colorbox.settings.speed = 200;

        $(window).resize(function(){
        // Resize Colorbox when resizing window or changing mobile device orientation
        resizeColorBox();
        window.addEventListener("orientationchange", resizeColorBox, false);
        });

        var resizeTimer;
        function resizeColorBox() {
        if (resizeTimer) {
        clearTimeout(resizeTimer);
        }
        resizeTimer = setTimeout(function() {
        if (jQuery('#cboxOverlay').is(':visible')) {
        jQuery.colorbox.reload();
        }}, 300);}  
    });
</script>