javascript - 使用jQuery使用媒体查询检测浏览器宽度

我正在尝试实现一种基于媒体查询来确定用户浏览器宽度的精确方法。例如，我有一个名为#check_screen的元素div，它最初将显示为块元素。如果浏览器宽度为#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");
    }
}

由于某种原因，它无法正常工作。当我将屏幕尺寸调整为

最佳答案

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

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

所做的更正对我没有任何其他变化。

关于javascript - 使用jQuery使用媒体查询检测浏览器宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42465235/

checksize

javascript - 使用jQuery使用媒体查询检测浏览器宽度