仅在桌面模式下激活 jquery 功能？答案

【问题标题】：Activating a jquery function only in desktop mode?仅在桌面模式下激活 jquery 功能？
【发布时间】：2013-07-18 17:48:18
【问题描述】：

我有一个 jquery 功能，它将导航栏粘贴到网页的顶部，但我只希望在桌面和平板电脑模式下使用此功能（而不是在手机模式下）。如何停用此功能？

$(document).scroll(function(){
    var elem = $('.navbar');
    if (!elem.attr('data-top')) {
        if (elem.hasClass('navbar-fixed-top'))
            return;
        var offset = elem.offset()
        elem.attr('data-top', offset.top);
    }
    if (elem.attr('data-top')  <= $(this).scrollTop() )
        elem.addClass('navbar-fixed-top');
    else
        elem.removeClass('navbar-fixed-top');
 });

【问题讨论】：

stackoverflow.com/questions/3514784/…
您可能应该基于屏幕分辨率而不是设备/操作系统/浏览器检测，因为这可能是您不想固定导航栏的实际原因到网页顶部，是吗？
将媒体查询与将其固定到顶部的类一起使用，这样当不超过特定分辨率时，固定顶部不会做任何事情。

标签： javascript jquery html css media-queries

【解决方案1】：

使用 CSS 媒体查询来操作导航栏。浏览器/操作系统检测不应影响样式，而应仅影响分辨率和媒体类型。

What is the syntax for a CSS media query that applies to more than one property (AND operator)?

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

【讨论】：

【解决方案2】：

根据您的问题，似乎真正关心的是在移动设备上节省屏幕空间。因此，正如大多数其他用户所指出的那样，您可以在这里改用媒体查询。为了确保在小屏幕的情况下甚至不附加监听器，您可以使用 Modernizr.mq 来测试媒体查询并使用返回值：

if( Modernizr.mq('only screen and (min-height: 640px)') ) {
  // Case specific code here, only executed if screen height is > 640px
}

这是假设您愿意添加 Modernizr 或已经在使用它。如果您还没有包含它并且只打算使用这个单一测试，您可以从 modernizr.com 下载一个自定义构建 (2kB)，它只包含媒体查询测试。

【讨论】：

【解决方案3】：

看看这个——也许你正在寻找它们是开源手机检测

http://detectmobilebrowsers.com/

【讨论】：