jQuery Fancybox强制桌面版下页面缩放后图片不居中咨询

站点开启移动端强制展示桌面版的访问策略时，用户手动双指缩放页面会直接改变浏览器的可视区坐标参考系，而Fancybox默认的居中定位逻辑是基于未缩放的页面坐标系计算的，一旦用户完成缩放操作，原有定位值就会出现偏差，放大倍率越高偏差越大，极端情况下会把图片直接定位到可视区外，出现完全看不到图的故障。

核心补充CSS规则 #

针对前期排查锁定的4个关键样式类，直接在站点全局样式表中追加以下规则，从定位参考层面抵消页面缩放带来的偏移误差：

/* 锁死Fancybox滑片容器的定位参考，固定为当前可视视口，不跟随页面缩放偏移 */
.fancybox-slide {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: translate3d(0, 0, 0) !important;
    transform-origin: 0 0 !important;
}

/* 修正图片内容层的居中计算逻辑，完全基于可视视口定位 */
.fancybox-slide--image .fancybox-content {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    /* 用transform实现居中，不受页面缩放比例影响 */
    transform: translate(-50%, -50%) !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
}

/* 修正图片本身的尺寸适配规则，避免缩放后尺寸计算失真 */
.fancybox-image,
.fancybox-slide img {
    display: block !important;
    max-width: calc(100vw - 40px) !important;
    max-height: calc(100vh - 40px) !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

配套初始化逻辑调整 #

仅靠CSS规则无法完全覆盖Fancybox内部的坐标计算逻辑，需要同步调整初始化参数，彻底关闭基于页面滚动偏移的定位计算：

// 替换原有Fancybox初始化配置，选择器按项目实际的画廊结构调整
$().fancybox({
    selector: '.gallery-item a',
    // 强制指定父容器为body，避免被其他带偏移的嵌套容器影响
    parentEl: 'body',
    // 画廊打开时主动重置页面参考位置，抵消缩放带来的滚动偏移
    afterLoad: function(instance, currentSlide) {
        window.scrollTo(0, 0);
        currentSlide.update();
    },
    // 关闭滚轮缩放关联的页面偏移联动逻辑
    wheel: false
});

修复效果说明 #

上述规则上线后，无论用户在移动端将页面缩放至任何比例，打开画廊时都会直接将图片锚定在当前可视视口的中心位置，不会跟随原页面的缩放偏移把图片移出可视范围。未缩放状态下的原有显示效果不会受任何影响。

内容的提问来源于stack exchange，提问作者Dakifiz