javascript - 媒体查询 JavaScript 也在浏览器上工作

Question

我正在尝试使用 JavaScript 和媒体查询。我想用 JavaScript 改变一些元素，比如切换元素等。

当浏览器/设备宽度为 320px 时，我想做点什么。

我想出了以下内容，但这不起作用：

if (screen.width < 320){ 
    $('input[type="text"]').insertAfter('label');
    $('input[type="text"]').eq(1).remove();
    $('input[type="text"]').eq(2).remove();             
}

我究竟做错了什么？

当我想对我的 CSS 进行一些更改时，它看起来像这样：

@media only screen and (max-width : 400px) { }

上面的例子我想转换成 JavaScript。

Answer 1

您可以在 JavaScript 中调用媒体查询：

function resize() {
    if (window.matchMedia('only screen and (max-width: 400px)').matches) {
        document.body.style.background = 'red';                   
    } else if (window.matchMedia('only screen and (min-width: 401px) and ' +
                                 '(max-width: 600px)').matches) {
        document.body.style.background = 'blue';
    } else {
        document.body.style.background = 'yellow';               
    }
}

window.addEventListener('resize', resize, false);
resize();

Answer 2

是的。您可以使用$(window).width()来做到这一点。

if ($(window).width() < 320) {    
  $('input[type="text"]').insertAfter('label');
  $('input[type="text"]').eq(1).remove();
  $('input[type="text"]').eq(2).remove();
}

此外，如果您想检查是否发生了调整大小而不刷新，请使用$(window).resize()。

这是一个使用中调整大小的示例jsFiddle。

Answer 3

请参考以下网址：

Phonegap - 可靠的页面宽度检测？

您可以使用 Navigator 对象来检测 jquery 中的设备。

Answer 4

是的你可以。虽然媒体查询非常适合 CSS，但有时我们需要根据设备大小加载 js。

Paul Irish 编写的Media Match是一个很好的工具。Modernizr中使用了一个特征检测库。