jQuery屏幕尺寸适配问题：页面加载不执行仅缩放生效的解决方法

你的判断完全正确——问题根源就是只给resize事件绑定了逻辑，页面首次加载时没有触发这个移动元素的操作。最直接的解决方式是把核心逻辑抽成独立函数，既在页面加载完成时执行一次，又绑定到resize事件上。

另外可以优化下代码：利用你已经写的jQuery(function($){...})，里面直接用$代替jQuery更简洁；把重复的选择器存成变量，避免重复DOM查询，提升性能。

修改后的完整代码：

jQuery(function($){ 
    // 封装核心逻辑为独立函数
    function adjustShippingFieldsPosition() {
        const $shippingFields = $(".checkout.woocommerce-checkout .woocommerce-shipping-fields__wrapper");
        if($(window).width() <= 1024){
            $shippingFields.insertBefore(".checkout.woocommerce-checkout .flux-step.flux-step--2 .flux-checkout__shipping-table");
        } else {
            $shippingFields.insertBefore(".checkout.woocommerce-checkout .flux-checkout__content-right #order_review");
        }
    }

    // 页面加载完成后立即执行一次
    adjustShippingFieldsPosition();

    // 绑定resize事件，窗口缩放时触发
    $(window).on('resize', adjustShippingFieldsPosition);
});

关键修改点： #

• 把移动元素的逻辑封装成adjustShippingFieldsPosition函数，避免代码重复
• 在document ready回调里直接调用函数，确保页面加载时就执行一次
• 保留resize事件绑定，窗口缩放时依然触发逻辑
• 用变量缓存$shippingFields选择器结果，减少重复DOM查找

如果担心窗口频繁缩放导致函数多次执行影响性能，可以给resize事件加个防抖：

// 防抖函数
function debounce(func, delay = 200) {
    let timeoutId;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(func, delay);
    };
}

// 绑定带防抖的resize事件
$(window).on('resize', debounce(adjustShippingFieldsPosition));

防抖可以让函数在窗口停止缩放一段时间后再执行，避免频繁操作DOM。

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