1

我有一个 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');
 });
4

3 回答 3

2

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

适用于多个属性（AND 运算符）的 CSS 媒体查询的语法是什么？

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

于 2013-07-17T15:16:32.390 回答
1

根据您的问题，似乎真正关心的是在移动设备上节省屏幕空间。因此，正如大多数其他用户所指出的那样，您可以在这里改用媒体查询。为了确保在小屏幕的情况下甚至不附加监听器，您可以使用 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） ，它只包含媒体查询测试。

于 2013-07-18T09:19:38.313 回答
0

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

http://detectmobilebrowsers.com/

于 2013-07-17T15:08:45.700 回答