浏览器窗口 resize 时自动刷新页面，如何排除移动设备？

这个问题我太熟了！iOS设备滚动时，地址栏的显示/隐藏会触发resize事件，直接导致你的代码反复触发页面刷新，确实烦人。下面给你几个实用的修改方案，根据你的需求选就行：

方案一：直接排除所有移动设备 #

如果你的需求是完全不让移动设备触发resize刷新，可以先写一个移动设备检测函数，然后只在非移动设备上绑定resize事件：

// 检测是否为移动设备的函数，覆盖常见移动设备的UA规则
function isMobileDevice() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

// 只在非移动设备上执行原有刷新逻辑
if (!isMobileDevice()) {
    $(window).bind('resize', function(e) {
        if (window.RT) clearTimeout(window.RT);
        window.RT = setTimeout(function() {
            this.location.reload(false); /* false to get page from cache */
        }, 100);
    });
}

方案二：排除滚动导致的误触发（保留移动设备的窗口调整刷新） #

如果你希望移动设备在真正调整窗口尺寸（比如平板横竖屏切换）时仍能触发刷新，只是排除滚动时的误触发，可以通过判断窗口宽度是否变化来实现——iOS滚动时只会改变窗口高度，宽度不变：

// 初始化记录当前窗口宽度
let lastWindowWidth = $(window).width();

$(window).bind('resize', function(e) {
    const currentWidth = $(window).width();
    
    // 如果宽度没有变化，说明是滚动导致的高度变化，直接跳过刷新
    if (currentWidth === lastWindowWidth) {
        lastWindowWidth = currentWidth;
        return;
    }
    lastWindowWidth = currentWidth;

    // 原有刷新逻辑
    if (window.RT) clearTimeout(window.RT);
    window.RT = setTimeout(function() {
        this.location.reload(false); /* false to get page from cache */
    }, 100);
});

方案三：仅排除iOS设备 #

如果只想针对iOS设备做特殊处理，避免滚动时的误触发，可以单独检测iOS的UA：

// 检测是否为iOS设备
function isIOSDevice() {
    return /iPhone|iPad|iPod/i.test(navigator.userAgent);
}

$(window).bind('resize', function(e) {
    // 是iOS设备则直接返回，不执行刷新
    if (isIOSDevice()) return;
    
    // 原有刷新逻辑
    if (window.RT) clearTimeout(window.RT);
    window.RT = setTimeout(function() {
        this.location.reload(false); /* false to get page from cache */
    }, 100);
});

你可以根据自己的实际需求选择合适的方案，个人推荐方案二，既解决了滚动误触发的问题，又保留了移动设备正常调整窗口时的刷新功能~

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