如何根据屏幕分辨率运行某个 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!
}