Question

我正在尝试实现一种基于媒体查询确定用户浏览器宽度的精确方法。例如，我有一个名为#check_screen的元素div，它最初会显示为块元素。如果浏览器宽度是＆lt; 420px，然后#check_screen将拥有display: none属性。这是我到目前为止所尝试的：

HTML

<div id='check_screen'></div>

CSS

#check_screen{
    display: block;
}

@media only screen and (max-width: 420px){
    #check_screen{
        display: none;
    }
}

的jQuery

$(document).ready(function() {
    // run test on initial page load
    checkSize();

    // run test on resize of the window
    $(window).resize(checkSize);
});

//Function to the css rule
function checkSize(){
    if ($("#check_screen").css("display") == "none" ){
        console.log("hello");
    }
}

由于某种原因，它无法正常工作。当我将屏幕大小调整为＆lt; 420px，消息不会显示在控制台上。我也尝试使用：visible jQuery选择器，但这也不起作用。我使用Chrome作为浏览器。

Answer 1

我认为你有语法错误： $(window).resize(checkSize);应该是

$(window).resize(function(){
    checkSize();
});

这种纠正对我有用，没有其他变化。

Answer 2

指定不可见的div并将其颜色设置为黑色。

如果调整大小，请将其颜色更改为绿色。

Javascript就像

var check = $("element").css("background-color");

if(check == "black" {
}

else if...

使用jQuery通过媒体查询检测浏览器宽度

2 个答案: