javascript上的媒体查询？答案

【问题标题】：Media query on javascript?javascript上的媒体查询？
【发布时间】：2012-10-19 07:59:31
【问题描述】：

我想在平板电脑和手机上禁用以下 sn-p。

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

        });

    }
}

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

【问题讨论】：

@ahren var windowWidth = $(window).width(); if(windowsWidth > "800px"){functions here?}

标签： javascript jquery media-queries liquid-layout

【解决方案1】：

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

#widget{display:none}

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

JS：

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

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

【讨论】：

我没有为手机设计任何不同的样式，因为它是一种流动的布局，一切看起来都很完美，但我会尝试 if 条件:)

【解决方案2】：

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

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

但是要小心，因为这个函数是not supported by all browsers!

编辑

可以在 here 找到 Paul Irish 的 polyfill。

【讨论】：

如果支持更大，我可以使用它，但由于 iOS 4.2.1 不支持它，android 2.3 和 2.2 也不支持，这不是一个选项。
@ChristianNikkanen 您可以为那些浏览器使用 polyfill，例如 the one by Paul Irish。
var windowWidth = $(window).width(); if(windowsWidth > "800px"){functions here?} 怎么样？
@ChristianNikkanen 这在大多数情况下可能有效，但我认为，您会遇到调整大小的浏览器窗口等问题。
@ChristianNikkanen jQuery.width() 获取浏览器的当前宽度。因此，如果用户正在调整其浏览器的大小，您可能会得到误报/误报。因此，您还必须为resize 事件添加一个处理程序来解决这个问题。你并没有真正得到用户代理的min-width，而是它的当前宽度！

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

<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中检测到这种样式。

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

【讨论】：

我宁愿远离黑客。
好吧，这不是什么黑客行为。您可以只使用一些全局变量，例如“deviceType”或其他东西，然后只需在 body:after preudoelement 中为该变量分配一个值。所有其他 .js 代码只会检查这个变量。
如果这不是黑客，那么就没有黑客。
好吧，好吧，你是对的 =) 但是 - 设置不同的值来显示 css 属性然后检查也是一种技巧。我在这里看不到 1) 不是 hack 2) 不要简单地检查屏幕尺寸的分析器

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：