如何根據屏幕分辨率運行某個 JavaScript (jQuery) 函數？

Question

我需要在我的網站上運行一些 jQuery，如果用戶在視網膜顯示器上查看網站，我需要使用不同的值運行 jQuery。 我找到了 matchMedia - 我知道如何將它用於某些寬度，但是我可以根據屏幕分辨率來執行此操作嗎（即，如果用戶使用的是 iMac，則運行此 jQuery，如果不是，則運行此其他 jQuery）？

我嘗試使用 window.devicePixelRatio，但我確定這是錯誤的。 我是在正確的方向還是完全偏離？

ETA - 我用下面的代碼讓它工作。 謝謝imvain2！

 let test = window.devicePixelRatio
    
    $(window).scroll(function(){
    parallaxfx();
})
    

    function parallaxfx() {
        var wScroll = $(window).scrollTop();
        if(test === 2) {
        $('.parallaxed1').css('top', -325+(wScroll*0.05)+'px')
        $('.parallaxed2').css('top', -650+(wScroll*0.2)+'px')
        $('.parallaxed3').css('top', -1130+(wScroll*0.3)+'px')
        $('.parallaxed4').css('top', -700+(wScroll*0.1)+'px')
        $('.parallaxed5').css('top', -1010+(wScroll*0.2)+'px')
            }
        else {
        $('.parallaxed1').css('top', -125+(wScroll*0.05)+'px')
        $('.parallaxed2').css('top', -650+(wScroll*0.2)+'px')
        $('.parallaxed3').css('top', -1130+(wScroll*0.3)+'px')
        $('.parallaxed4').css('top', -700+(wScroll*0.1)+'px')
        $('.parallaxed5').css('top', -1010+(wScroll*0.2)+'px')
        }
    }

Answer 1

為此，您最好使用 css 媒體查詢。

@media (max-width: 767px) {
   css styles that need to be altered for mobile go here!
}

您還可以在媒體查詢中使用 min-width 僅將 stiles 應用於大屏幕。

@media (min-width: 767px) {
   css styles that need to be altered for destop go here!
}

而且還有范圍。

@media (min-width: 360px) and (max-width: 767px) {
   css styles for screens within this range go here!
}