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

【问题标题】：Media queries JavaScript also on browser working媒体查询 JavaScript 也在浏览器上工作
【发布时间】：2018-06-01 18:22:44
【问题描述】：

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

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

我想出了以下方法，但这不起作用：

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。

【问题讨论】：

标签： javascript css media-queries

【解决方案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();

【讨论】：

【解决方案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 正在使用的调整大小示例。

【讨论】：

抱歉，它对我不起作用 :( 我在上面尝试了您的示例，但我没有收到我在您的 2 个示例中设置的警报...我错了什么？跨度>
@Caspert 您实际上是如何检查它的？你 console.logged 宽度是多少？为什么你不能只使用媒体屏幕和 (max-width : 320px) { }
是的，我已经尝试过了，但我认为我做错了：console.log(window.width); 它不能与 css 一起使用的原因是因为我想替换 a 元素内的一些文本并切换一些对象...
感谢您的回答和提醒。现在我在刷新后得到控制台所有宽度并使浏览器更小......只有这对我有用：if ($(window).width() < 320) {。是否也可以在不刷新的情况下进行更改，例如 css 中的媒体查询？
你是我的英雄！绝对感谢。效果符合您的预期！

【解决方案3】：

请参考以下网址：

Phonegap - reliable page width detection?

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

【讨论】：

【解决方案4】：

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

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

【讨论】：