如何根据屏幕尺寸切换HTML中两个JavaScript脚本的启用状态？

CSS的@media没法直接控制脚本的加载或执行——就算给<script>加类用媒体查询隐藏，脚本还是会在页面加载时正常运行。下面是两种可行的实现思路：

方案1：动态加载脚本（推荐） #

只在页面中加入一段检测逻辑，根据屏幕尺寸动态创建并加载对应脚本，避免加载不需要的资源：

<script>
// 检测当前屏幕宽度
const isMobile = window.innerWidth <= 850;
// 创建script元素
const targetScript = document.createElement('script');
// 根据设备类型设置脚本路径
targetScript.src = isMobile ? 'script1.js' : 'script2.js';
// 将脚本添加到页面中执行
document.body.appendChild(targetScript);

// 可选：监听窗口尺寸变化，切换脚本（需处理防抖和重复加载问题）
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    const nowIsMobile = window.innerWidth <= 850;
    // 如果设备类型变化，移除旧脚本并加载新脚本
    if (nowIsMobile !== isMobile) {
      // 先移除已加载的脚本（可选，根据脚本逻辑决定是否需要清理）
      document.body.removeChild(targetScript);
      // 重新创建并加载新脚本
      const newScript = document.createElement('script');
      newScript.src = nowIsMobile ? 'script1.js' : 'script2.js';
      document.body.appendChild(newScript);
      // 更新设备状态标记
      isMobile = nowIsMobile;
    }
  }, 200); // 200ms防抖，避免频繁触发
});
</script>

方案2：控制脚本执行逻辑（已加载双脚本时） #

如果已经固定引入了两个脚本，可以给每个脚本设置入口函数，通过屏幕尺寸判断执行哪个，并处理切换时的状态清理：

1. 改造script1.js和script2.js，将逻辑封装到入口函数中：

// script1.js
function initScript1() {
  // 这里写script1的所有业务逻辑
}

// 可选：添加清理函数，用于切换时重置状态
function destroyScript1() {
  // 移除script1创建的DOM元素、取消事件监听等
}

// script2.js
function initScript2() {
  // 这里写script2的所有业务逻辑
}

// 可选：添加清理函数
function destroyScript2() {
  // 移除script2创建的DOM元素、取消事件监听等
}

2. 在HTML中添加控制脚本：

<script src="script1.js"></script>
<script src="script2.js"></script>
<script>
function switchScripts() {
  const isMobile = window.innerWidth <= 850;
  
  // 先清理另一个脚本的状态（如果有清理函数）
  if (isMobile) {
    destroyScript2?.();
    initScript1();
  } else {
    destroyScript1?.();
    initScript2();
  }
}

// 页面加载时执行一次
switchScripts();

// 监听窗口尺寸变化，防抖处理
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(switchScripts, 200);
});
</script>

注意：这种方式两个脚本都会被加载，适合脚本体积较小的场景；如果脚本较大，优先用方案1减少不必要的资源加载。

内容的提问来源于stack exchange，提问作者Ben SreR sf