如何基于屏幕分辨率运行某个JavaScript (jQuery)函数?

Question

我需要在我的网站上运行一些jQuery，如果用户在视网膜显示器上查看网站，我需要运行具有不同值的jQuery。我发现matchMedia -我知道如何使用某些宽度，但我可以这样做基于屏幕分辨率(即，如果用户使用iMac，运行这个jQuery，如果不是，运行这个其他的jQuery)?

我尝试使用window.devicePixelRatio，但我确信这是错误的。我的方向是对的还是完全错了?

ETA -我得到了它与下面的代码工作。谢谢imvain2 !

let detectRetina = window.devicePixelRatio

$(window).scroll(function(){
parallaxfx();
})

function parallaxfx() {
let wScroll = $(window).scrollTop();
if(detectRetina === 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来仅在大屏幕上应用样式。

@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!
}