无需调整页面大小的 Jquery 和媒体查询答案

【问题标题】：Jquery and media query without page resize无需调整页面大小的 Jquery 和媒体查询
【发布时间】：2014-10-14 10:08:42
【问题描述】：

我在这里有一个 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

它通过在调整页面大小时检查是否设置了媒体查询来工作。

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

做到这一点，响应是在window.resize函数外检查。

如何在 window.resize 函数之外进行检查。

【问题讨论】：

标签： jquery media-queries

【解决方案1】：

你可以通过两种方式做到这一点：

方法一：定义一个函数，在 DOM 就绪时调用，在 resize 事件期间再次调用

此方法涉及定义一个函数，例如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()

或者，您可以通过将trigger the resize event again 链接到$(window) 对象来选择它。更长但更详细的等价物是.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/

【讨论】：