jQueryを使用してメディアクエリでブラウザの幅を検出する

Question

メディアクエリに基づいてユーザーのブラウザの幅を正確に把握する方法を実装しようとしています。たとえば、#check_screenと呼ばれる要素divが最初にブロック要素として表示されます。ブラウザの幅が< 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"); 
    } 
} 

のために何らかの理由で、正しく動作していません。画面のサイズを< 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...