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

我想实现基于媒体查询来计算用户浏览器宽度的精确方法。例如，我有一个名为#check_screen的元素div，最初它将显示为块元素。如果浏览器宽度为< 420px，则#check_screen将具有display: none属性。这是我到目前为止已经试过：使用jQuery的媒体查询检测浏览器宽度

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"); 
    } 
}

对于某些原因，它不能正常工作。当我将屏幕调整为< 420px时，消息不会显示在控制台上。我也试过使用：可见的jQuery选择器，但这也不起作用。我使用Chrome作为我的浏览器。

来源

2017-02-26 user2896120

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

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

的校正工作对我来说，没有其他变化。

来源

2017-02-26 06:57:52

由于某种原因，它仍然不适用于我 – user2896120

这是演示http://codepen.io/khaledallen/pen/egXxMb?editors=1111 –

啊，我明白了！我的调整大小功能在document.ready函数之外。谢谢！ – user2896120

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

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

的Javascript会像

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

if(check == "black" { 
} 

else if...

来源

2017-02-26 06:35:37

它仍然不工作由于某种原因 – user2896120

你包括jquery，然后这个脚本？你把这个放在了吗？在小提琴上发布你的代码。 –

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

回答

相关问题