2017-01-19 54 views
0

我目前正在使用此腳本來查看訪問我的網站的用戶是否具有小於800的屏幕寬度。我遇到的問題是我還希望警報被觸發當用戶將他們的屏幕寬度調整到小於800時,這怎麼能實現?screen.width不檢查窗口調整大小

目前腳本僅顯示警報後在最大屏幕寬度小於800

例如,我想這個消息觸發,當用戶有說1000的寬度,但隨後縮減他們的瀏覽器寬度720

if (screen.width <= 800) { 
    window.alert("screen smaller than 800"); 
    } 
+1

聆聽到你的腳本 – empiric

+3

以供將來參考'resize'事件,永遠記住谷歌第一:對於'查詢screen.width不檢查窗口調整大小將已經給你所有你需要的。只是FYI。 –

+0

也只是供參考,如果你需要這個寬度檢查,因爲你正在修改的用戶界面,然後使用CSS媒體查詢將是一個更好的解決方案 –

回答

1

您需要:

window.addEventListener('resize', function() { 
    if (window.innerWidth <= 800) { 
    window.alert("screen smaller than 800"); 
    } 
}, true); 
+2

@LewisDay請記住,使用'addEventListener'是首選方式,因此您不會覆蓋任何偵聽器,並且'screen.width'不會改變,除非您旋轉顯示器:p –

+0

@Juan Mendes True,I agree – aimadnet

2

把它包在一個resize event,你需要獲得window's width,沒有t爲screen's width

window.addEventListener("resize", function() { 
    if (window.innerWidth <= 800) { 
     window.alert("screen smaller than 800"); 
    } 
}) 
1

您可以調整大小功能國防部這樣的:

var width = $(window).width(); 

$(window).resize(function(){ 
    if ($(this).width() <= 800) { 
    window.alert("screen smaller than 800"); 
    } 
});