JS判断设备类型跳转无限循环，如何实现桌面移动端视图分离

一、现有代码问题与无限循环跳转原因 #

• 核心问题是跳转逻辑无终止条件：脚本只要被加载就会无条件执行跳转至products.php的操作，而跳转后的目标页面同样会加载这段脚本，再次触发跳转，最终形成无限循环。
• 条件分支写法存在隐患：三个设备判断使用独立if语句而非互斥分支，后续调整宽度阈值时很容易出现变量赋值覆盖的逻辑错误。
• 缺少状态校验：没有判断当前URL是否已经携带匹配的设备参数，无论当前展示的是哪个端的视图都会重复触发跳转。

二、修复后的可运行跳转代码 #

修复逻辑新增了参数校验步骤：只有当当前URL无device参数、或参数值和实际判定的设备类型不匹配时才触发跳转，从根源上避免死循环；同时将条件判断改为互斥分支，新增窗口尺寸变化的防抖监听，适配用户拖动浏览器窗口的场景。

<script>
jQuery(function($) {
    // 解析当前URL的查询参数
    const urlSearch = new URLSearchParams(window.location.search);
    const currentDevice = urlSearch.get('device');
    const getDeviceType = () => {
        const width = $(window).width();
        if (width >= 992) return 'desktop';
        if (width >= 768) return 'tablet';
        return 'mobile';
    }
    const targetDevice = getDeviceType();

    // 仅在设备类型不匹配时跳转
    if (currentDevice !== targetDevice) {
        window.location.href = `products.php?device=${targetDevice}`;
    }

    // 可选：监听窗口尺寸变化，防抖处理避免频繁触发
    let resizeTimer = null;
    $(window).on('resize', () => {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(() => {
            const newDevice = getDeviceType();
            if (urlSearch.get('device') !== newDevice) {
                window.location.href = `products.php?device=${newDevice}`;
            }
        }, 300);
    })
})
</script>

三、桌面/移动端独立视图实现方案 #

你可以根据项目需求选择以下任意一种方案：

• 后端渲染适配（性能最优）
  在products.php中读取URL携带的device参数，参数为desktop时直接输出桌面端的HTML结构，参数为mobile时输出移动端结构，不需要前端额外做DOM显示隐藏，首屏加载速度最快。
• CSS媒体查询适配（无跳转）
  如果不想做URL跳转，可以在同一个页面内编写两套视图DOM，通过CSS媒体查询根据窗口宽度控制对应视图的显示隐藏，示例代码：

/* 桌面端默认显示 */
.desktop-view { display: block; }
.mobile-view { display: none; }

/* 宽度≤767px时切换为移动端视图 */
@media (max-width: 767px) {
    .desktop-view { display: none; }
    .mobile-view { display: block; }
}

/* 可按需新增768px-991px区间的平板端适配样式 */

• 前端动态渲染
  页面初始加载时判定设备类型，通过JS动态将对应端的视图HTML渲染到页面容器中，不需要跳转，也不需要提前写两套隐藏的DOM结构，适合视图复杂度较低的场景。

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