jquery - 是否可以仅在特定的浏览器宽度下执行函数？

Question

我正在尝试通过 CSS 媒体查询从我的“桌面”网站创建一个移动网站。

我有一个简单的下拉菜单(桌面)，可以转换为下推菜单(移动)。桌面版的 CSS 会在浏览器宽度超过 768 像素的任何位置加载，移动设备下推菜单会在浏览器宽度低于 767 像素的任何位置加载。

问题是下推菜单需要 js 文件才能正常运行。 js 文件强制隐藏包含菜单的 div。因此，在浏览器宽度达到 767 像素时，下推工作正常，在 768 像素时，桌面导航不可见。

我是 JavaScript 和 Jquery 新手，但我尝试使用我最少的知识使其有效运行。我需要它尽可能简单，因为网站必须尽可能最小。

目前这是我最接近正常运行的情况:

function hideDiv(){
    if ($(window).width() < 768) {

        $(".togglebox").hide();

    }else{

        $(".togglebox").show();

    }

}

//run on document load and on window resize
$(document).ready(function () {

    //on load
    hideDiv();

    //on resize
    $(window).resize(function(){
        hideDiv();
    });

});


$(document).ready(function(){

    $(".togglebox").hide();

    $("h1").click(function(){

    $(this).next(".togglebox").slideToggle("slow");
    return true;
    });
});

注释:

需要隐藏切换框 div 才能使下推菜单正常工作，但是相同的 div 需要在超过 768 像素宽度时可见，才能使桌面导航可见。

上面的代码使它工作正常，但是当我输入页面网址时，在我尝试调整浏览器宽度之前不会出现导航。我知道我有两个 (document).ready 函数，也许这就是问题所在，但我尝试过使用代码，但没有任何运气。一定有一个我忽略的简单解决方案？

我想也许只能在宽度不超过 767px 的任何地方执行下推菜单功能，然后再在宽度以上的任何地方执行简单地显示切换框 div。

Answer 1

当您已经使用媒体查询时，无需加载 JavaScript 文件来隐藏元素。例如，我可以在任何宽度不大于 767 像素的窗口中隐藏 .toggleBox:

@media screen and ( max-width: 767px ) {
  .toggleBox {
    display:none;
  }
}

没有任何理由使用 JavaScript 轮询浏览器的宽度来完成媒体查询的发明目的。

演示:http://jsfiddle.net/HPsu8/show/

支持说明

正如下面的评论所指出的，旧版本的 Internet Explorer 不支持媒体查询。如果您希望使用它们，同时保持对旧版本 IE 的支持，请考虑使用 polyfill。您可以在这里找到几个:https://github.com/Modernizr...HTML5-Cross-Browser-Polyfills