Question

我想在平板电脑和手机上禁用以下代码段。

if ( !! $('#sidebar').offset()) {    
        var stickyTop = $('#sidebar').offset().top;            
        $(window).scroll(function() {    
            var windowTop = $(window).scrollTop();    
            if (stickyTop < windowTop) {
                $('#sidebar').css({ position: 'fixed', top: "120px" ,  right: "5%" });    
            }
            else {
                $('#sidebar').css('position', 'static');
            }

        });

    }

我正在考虑将媒体查询或其他内容包含在内，如下所示：

if(@media (min-width:500px)){
if ( !! $('#sidebar').offset()) {

        var stickyTop = $('#sidebar').offset().top;


        $(window).scroll(function() {

            var windowTop = $(window).scrollTop();

            if (stickyTop < windowTop) {
                $('#sidebar').css({ position: 'fixed', top: "120px" ,  right: "5%" });

            }
            else {
                $('#sidebar').css('position', 'static');
            }

        });

    }
}

但我确信这不会起作用，那么我如何阻止这些代码在手机上工作呢？

Answer 1

最好的解决方案可能是为每个媒体设置不同的元素（即使它是margin:1px），然后检测计算出的样式。这样，您可以同样轻松地使用任何CSS媒体规则，并获得完全兼容性： CSS：

#widget{display:none}

@media screen{
  #widget{display:block}
}

JS：

if($("#widget").css("display")!="none){
   ...
}

请注意，您不应该查询媒体，而是查询浏览器功能，因为宽平板电脑的用户（有些甚至还有键盘）可能仍然想要使用侧边栏：if(document.width>600){...

Answer 2

您可以像这样使用matchMedia() function：

if ( window.matchMedia('(min-width:500px)') ) {
  // your code
}

但请谨慎，因为此功能为not supported by all browsers！

修改

保罗爱尔兰人的填充物可以找到here。

Answer 3

if( $(window).width() > 499 ) {
   // Code here
}

Answer 4

Idk如果这是最好的方式，但是：

<style type="text/css" media="screen">
body:after 
{
    content:url("javascript:(function(){document.getElementsByTagName('p')[0].innerHTML=' ';})()");
}
</style>

即 - 使用伪元素在body标记后添加特定的javscript。

另一种方法是为不同的媒体分配不同的样式body或某些特殊的hidden field，然后从jQuery或普通的javascript中检测这种样式。

检查窗口宽度不是首选方法！普通屏幕设备和手持设备之间的界限逐渐减少。

Answer 5

窗口宽度检测充其量只是片状：平板电脑是移动设备，而不是大屏幕特征＆gt; 500px的。我建议您尝试使用userAgent sniffing或detectmobilebrowsers.com/处的脚本。另一种选择是使用modernizr来检查启用触摸的设备

Answer 6

您可以使用matchMedia作为@Sirko指出，为了与旧浏览器兼容，您可以使用此matchMedia polyfill，如下所示：

if (matchMedia('(min-width:500px)').matches) {
    // do your stuff
}

媒体查询javascript？

6 个答案: