使用JavaScript进行媒体查询？

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()函数 ：

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

但是请谨慎，因为并非所有浏览器都支持此功能！

编辑

保罗·爱尔兰（Paul Irish）的polyfill可以在这里找到。

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

窗口宽度检测充其量只是一点点：平板电脑通常是移动设备，没有大于500像素的大屏幕。 我建议您尝试userAgent嗅探 ，或在detectmobilebrowsers.com/上的脚本。 另一个选择是使用modernizr检查启用触摸的设备

Answer 6

您可以像@Sirko所指出的那样使用matchMedia ，并且为了与旧版浏览器兼容，您可以像下面这样使用matchMedia polyfill ：

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