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 - reliable page width detection?

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

Answer 4

是的，你可以。虽然媒体查询对css很有用，但有时我们需要根据设备大小加载js。

Paul Irish撰写的

Media Match是一个很好的工具。它在Modernizr功能检测库中使用。

媒体在浏览器工作时查询JavaScript

4 个答案: