link[rel="alternate"]标签不会触发自动跳转，仅向搜索引擎或辅助工具声明替代资源；真正实现跳转需依赖服务端重定向、前端js检测或meta refresh降级方案。
link[rel="alternate"] 标签本身**不会触发任何自动跳转**，无论你写多少条，浏览器都不会因此重定向用户。它只是个声明型标签，作用对象是搜索引擎或辅助工具，不是用户浏览器。
为什么加了 link[rel="alternate"][media] 还是不跳转
常见误解是把 link[rel="alternate"] 当成跳转指令。比如在 PC 页面里写：
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/">
这行代码对用户完全无效——它只告诉搜索引擎：“移动端有另一个版本”，但浏览器既不解析 media 查询，也不执行跳转。
- 现代桌面浏览器（Chrome/Firefox/Safari）完全忽略该标签的跳转意图
- 部分旧版 Opera 或特定阅读器可能读取，但不可依赖
-
media属性仅用于匹配设备能力，不触发行为
真正能实现移动跳转的三种方式
要让用户访问 PC 地址时自动进 H5 页面，必须用主动检测+跳转逻辑：
- 服务端 User-Agent 检测：Nginx 或 Node.js 在响应前判断请求头，返回 302 重定向。最可靠，JS 禁用也生效
-
前端 JS 检测：用
navigator.userAgent或matchMedia判断，再执行window.location.href。需注意 SSR 场景下首次渲染延迟 - meta refresh 降级方案：配合 JS 使用，如 JS 失效则 3 秒后 fallback 跳转。但 SEO 不友好，仅作兜底
示例 JS 判断逻辑（放在 尾部）：
<script>
if (/Mobi|Android/i.test(navigator.userAgent)) {
window.location.href = 'https://m.example.com/';
}
</script>
link[rel="alternate"] 的正确用途和易错点
它只在两个场景下有意义，且都与跳转无关：
-
多语言页面声明：配合
hreflang告诉搜索引擎“中文页对应英文页”，必须双向绝对 URL、BCP 47 格式（如zh-Hans），且不能混用zh-CN -
可切换样式表：用
rel="alternate stylesheet"+title属性提供主题切换选项，需配合 JS 控制disabled属性激活
容易踩的坑：
- 把
href写成相对路径（如/m/），搜索引擎直接忽略 - PC 页写了 mobile 版链接，但 mobile 页没反向写回 PC 版，导致 hreflang 关系断裂
- 误以为
link[rel="alternate"]会修改或触发翻译，它完全不影响 DOM 渲染
真正决定跳不跳的，从来不是 link 标签，而是你有没有在服务端或 JS 里写下那行 window.location.href 或 302 响应。别让语义化标签背跳转的锅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
