使用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的媒體查詢檢測瀏覽器寬度

回答

相關問題