如何根据屏幕分辨率（含Retina屏）运行不同的jQuery函数？

算力阿峰

2026-8-25

基于Retina显示屏调整jQuery视差逻辑的实现

核心问题解答

使用window.devicePixelRatio检测Retina显示屏是完全可行的方案，这是前端区分高DPI（高密度像素）屏幕的标准方式。Retina屏的devicePixelRatio值通常为2（部分高端设备如部分iPhone Pro系列会达到3），通过这个值可以精准判断用户是否使用Retina类高分辨率屏幕，进而执行不同的逻辑。

实现代码

以下是最终实现的适配Retina屏的jQuery视差滚动代码：

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')
    }
}