嘿，我懂你想要的效果——给不同的链接设置桌面/移动端专属跳转地址，还要能批量处理、别搞太复杂的逻辑对吧？下面给你几个高效的方案，不管是单个链接还是多种不同类的链接都能轻松搞定：

方案一：基于数据集（data属性）的灵活JS方案（首推） #

这个方案扩展性极强，不管你的链接是什么类名，只要给它加两个自定义属性就能生效，还能自动适配窗口缩放的情况。

步骤1：给链接添加数据集属性 #

在HTML里，给需要动态切换的链接加上data-desktop（桌面端地址）和data-mobile（移动端地址）属性，类名随便你定义：

<a class="dynamic-link" data-desktop="www.test.sk/desktop" data-mobile="www.test.sk/mobile">Link 1</a>
<a class="another-link" data-desktop="www.test.sk/desktop-2" data-mobile="www.test.sk/mobile-2">Link 2</a>
<a class="custom-link" data-desktop="www.test.sk/desktop-3" data-mobile="www.test.sk/mobile-3">Link 3</a>

步骤2：编写复用的JS逻辑 #

写一个通用函数来处理链接切换，页面加载和窗口大小变化时自动执行：

// 定义切换链接的核心函数
function updateDynamicLinks() {
  // 这里用768px作为移动端断点，你可以根据项目需求调整
  const isMobile = window.innerWidth < 768;
  
  // 选中所有带有data-desktop和data-mobile属性的链接
  const dynamicLinks = document.querySelectorAll('[data-desktop][data-mobile]');
  
  dynamicLinks.forEach(link => {
    // 根据当前设备/窗口尺寸设置对应的跳转地址
    link.href = isMobile ? link.dataset.mobile : link.dataset.desktop;
  });
}

// 页面加载完成后执行一次
document.addEventListener('DOMContentLoaded', updateDynamicLinks);

// 监听窗口大小变化，实时更新链接
window.addEventListener('resize', updateDynamicLinks);

方案优势 #

• 完全不受类名限制，新增链接只需要加两个data属性，不用修改JS代码
• 支持窗口缩放动态切换，用户把桌面窗口拉小到移动端尺寸也能自动适配
• 逻辑清晰简洁，比你之前尝试的复杂媒体查询JS方案高效太多

方案二：纯CSS静态切换方案（适合不需要动态窗口适配的场景） #

如果你的场景不需要支持窗口缩放时的实时切换，纯CSS方案会更轻量，不用写JS：

HTML结构 #

给每个链接做两个版本，放在同一个容器里：

<div class="link-group">
  <a class="desktop-only" href="www.test.sk/desktop">Link</a>
  <a class="mobile-only" href="www.test.sk/mobile">Link</a>
</div>

CSS样式 #

用媒体查询控制不同尺寸下显示对应的链接：

/* 默认显示桌面端链接 */
.mobile-only {
  display: none;
}

/* 移动端断点下切换显示移动端链接 */
@media (max-width: 767px) {
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: inline-block;
  }
}

方案注意点 #

• 优点是完全无JS，性能更好
• 缺点是页面会存在两个重复的链接元素，对SEO有一点点影响（影响很小），且不支持窗口缩放时的实时切换

小技巧补充 #

1. 自定义断点：不管是JS还是CSS方案，你都可以把768px改成项目里的专属断点（比如992px、1024px）
2. 精准设备判断：如果需要严格区分真实移动设备（比如平板），可以把JS里的window.innerWidth判断换成navigator.userAgent检测，但窗口宽度的方式更通用，因为现在很多桌面用户也会用小窗口浏览

备注：内容来源于stack exchange，提问作者Marcel