Question

我这里有一个jsfiddle - http://jsfiddle.net/gw4dx575/

    $(document).ready(function () {
        $(window).resize(function(){    
            if ($(".responsive-screen").css("content") === "M" ){
                console.log('mobile');
            }else{
                console.log('desktop');
            }
        });
    })

我需要一个简单的方法在不同的设备/屏幕尺寸上使用不同的jquery事件（悬停在桌面上并点击移动设备）。

我使用此处描述的方法 - http://www.fourfront.us/blog/jquery-window-width-and-media-queries

它的工作原理是检查页面大小调整时是否设置了媒体查询。

我的问题是，当页面没有像在mobiel设备上加载页面时那样调整大小时，我需要它才能工作。

这一点已经完成，响应是在window.resize函数之外检查。

如何在window.resize函数外部检查。

Answer 1

您可以通过两种方式实现：

方法1：定义在DOM就绪时调用的函数，并在调整大小事件期间再次调用

此方法涉及定义一个函数，比如fluid()，然后在触发窗口调整大小事件时触发它。

$(document).ready(function () {
    var fluid = function() {
        if ($(".responsive-screen").css("content") === "M" ){
            console.log('mobile');
        } else {
            console.log('desktop');
        }
    };

    // Fire on DOM ready
    fluid();

    // Fire upon resize
    $(window).resize(fluid);
});

http://jsfiddle.net/teddyrised/gw4dx575/4/

方法2：在DOM就绪

上触发.resize()

或者，您可以通过将其链接到$(window)对象来选择trigger the resize event again。更长但更详细的等价物是.trigger('resize') :)

$(document).ready(function () {
    $(window).resize(function() {
        if ($(".responsive-screen").css("content") === "M" ){
                console.log('mobile');
            } else {
                console.log('desktop');
            }        
    }).resize();
});

http://jsfiddle.net/teddyrised/gw4dx575/3/

没有页面调整大小的Jquery和媒体查询

1 个答案: