0

我有以下片段，我想在平板电脑和手机上禁用它。

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');
            }

        });

    }
}

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

4

6 回答 6

2

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

#widget{display:none}

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

JS：

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

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

于 2012-10-19T08:08:42.503 回答
1

您可以像这样使用该matchMedia()功能：

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

但是要小心，因为并非所有浏览器都支持此功能！

编辑

可以在这里找到 Paul Irish 的 polyfill 。

于 2012-10-19T08:06:45.827 回答
0 
if( $(window).width() > 499 ) {
   // Code here
}
于 2012-10-19T08:06:54.143 回答
0

如果这是最好的方法，我想知道，但是：

<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 中检测此样式。

检查窗口宽度不是首选方法！普通屏幕设备与手持设备的界限正在逐渐变暗。

于 2012-10-19T08:10:52.953 回答
0

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

于 2012-10-19T08:11:49.303 回答
0

您可以像@Sirko 很好地指出的那样使用matchMedia ，并且为了与旧浏览器兼容，您可以像这样使用这个matchMedia polyfill：

if (matchMedia('(min-width:500px)').matches) {
    // do your stuff
}
于 2012-10-19T08:15:57.477 回答