屏幕尺寸變化的檢測點

-2

我想在屏幕寬度變爲1120以下時檢測點，並且觸發一段代碼，但僅當屏幕尺寸超過該點時才執行此操作。我不希望運行的代碼時，有來自變化，例如，1000〜999只，從1121到1120屏幕尺寸變化的檢測點

來源

2016-07-11 Roaming Bear

，當你發現它低於你的代碼運行，以便在onResize，設置標誌。 – epascarello

每次點通過時都需要運行代碼。 –

所以當你從較少到較多時，你會解除旗幟。 – epascarello

爲了確保您的代碼不運行的每個瀏覽器的大小調整的時間，但只有當它改變高於或低於1200像素的分辨率，你可以使用一個布爾（真/假）標誌的唯一運行代碼當它的值需要改變時，在這種情況下，這個變量是under1200。

如果您使用此代碼，則不需要庫。

var under1200=false; 
 
    if(window.innerWidth<1200){ 
 
    \t under1200=true; 
 
    } 
 
    window.onresize = function(event) { 
 
    \t if(under1200 == false && window.innerWidth<=1200){ 
 
    \t \t console.log("Size under 1200"); 
 
    \t \t under1200=true; 
 
    \t \t 
 
    \t \t //YOUR CODE FOR LESS THAN 1200px HERE 
 
    \t } 
 
    \t if(under1200 == true && window.innerWidth>1200){ 
 
    \t \t console.log("Size over 1200"); 
 
    \t \t under1200=false; 
 
    \t \t 
 
    \t \t //YOUR CODE FOR +1200px HERE 
 
    \t } 
 
    }

來源

2016-07-11 13:25:33

可以使用.resize（）事件

$(window).on('resize', function(){ 
    var win = $(this); 
    if (win.width() >= 1120) { 
     /* ... */ 
    } 
});

來源

2016-07-11 13:18:11 Kld

在更寬的窗口調整大小時，它會重複運行代碼。我需要一次運行時，從寬變窄，每次點通過。 –

如果您是在尋找一個現代的方法，有matchMedia：

var matched = false; 

// media query event handler 
if (matchMedia) { 
    var mq = window.matchMedia("(min-width: 1120px)"); 
    mq.addListener(WidthChange); 
    WidthChange(mq); 
} 

// media query change 
function WidthChange(mq) { 
    if (mq.matches) { 
    // window width is at least 1120px 
    matched = false; // Reset match flag 
    } else { 
    // window width is less than 1120px 
    if(!matched) { 
     // Do your logic here 
    } 

    matched = true; 
    } 

}

（見https://www.sitepoint.com/javascript-media-queries/）

大多數瀏覽器似乎支持：http://caniuse.com/#feat=matchmedia

來源

2016-07-11 13:18:41 JohnHoulderUK

這會做你正在尋找什麼？

$(window).resize(function(){ 
    if (screen.width >= 1119 && screen.width <= 1120) { 
     // run code 
    } 
})

來源

2016-07-11 13:23:58 tigerdi

從一個快速測試，screen.width返回屏幕的寬度本身，我假設OP意味着窗口大小 – JohnHoulderUK

這裏有一個簡單的代碼：

var detectSize = function() { 
    if (window.innerWidth == 1120 || window.innerWidth == 1121) { 
     console.log('youre code here'); 
    }; 
} 
detectSize(); 
window.addEventListener('resize', detectSize, false);

來源

2016-07-11 13:31:09

當然，這也將擴大窗口時運行。 –

屏幕尺寸變化的檢測點

回答

相關問題