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

我正在尝试一些JavaScript和媒体查询。我想用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的例子..

希望有人能帮助我out

来源

2013-03-28 Caspert

是的。您可以使用$(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。

来源

2013-03-28 09:48:03 lifetimes

对不起，它不适用于我:(我试过上面的例子，但我没有得到一个警告，我已经在你的2个例子中设置...我错了什么？ – Caspert 2013-03-28 09:58:11

@Caspert你怎么样检查它？你有console.logged的宽度是什么？为什么你不能只使用媒体屏幕和（max-width：320px）{} – lifetimes 2013-03-28 10:00:47

是的我试过了，但我认为我做错了：'console .log（window.width）;'它不能用css工作的原因是因为我想替换一个元素中的一些文本，并且还要切换一些对象... – Caspert 2013-03-28 10:05:03

请参考以下网址：

Phonegap - reliable page width detection?

您可以使用Navigator对象检测jQuery的设备。

来源

2013-03-28 09:56:24 web2008

你可以调用JavaScript的内部

fiddle

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();

来源

2013-03-28 09:59:03 Venugopal

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

Media Match由Paul Irish撰写是一个很好的工具。它被用于Modernizr一个特征检测库。

来源

2013-03-28 09:59:23

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

回答

相关问题