link rel="alternate" 无法实现终端跳转，仅向搜索引擎声明存在另一版本；其 media 属性不被浏览器解析，真正终端适配需服务端 ua 检测、客户端 js 跳转或响应式设计。
在网页中定义多终端文档结构的映射关系">
link rel="alternate" 不能定义多终端文档结构的映射关系，也不能触发任何跳转或适配行为——它只向搜索引擎声明“存在另一个版本”，浏览器完全忽略。
为什么 link rel="alternate" + media 不会跳转
常见误解是写成这样就能让手机访问 PC 站时自动跳到 H5 页：
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/">
实际效果：用户打开页面毫无反应，Chrome/Firefox/Safari 都不解析该 media 条件，也不执行跳转。这个标签只被 Google、Bing 等爬虫读取，用于理解“移动端有镜像页”，但不参与前端渲染或路由逻辑。
- 旧版 Opera 或极少数阅读器可能响应，但不可依赖
-
media属性仅用于匹配设备能力描述，不是运行时判断依据 - 现代框架（React/Vue/Next.js）完全不监听这类
<link>标签
真正能实现终端映射的三种方式
要让用户在不同设备上看到对应版本，必须主动检测并跳转：
-
服务端 UA 检测：Nginx 或 Node.js 中间件检查
User-Agent请求头，返回302重定向到https://m.example.com/或https://example.com/mobile/ -
客户端 JS 检测：用
window.matchMedia或screen.width判断，再window.location.href = ...跳转（注意 SEO 友好性与首屏阻塞） -
响应式设计替代方案：不拆分页面，用 CSS 媒体查询 + Flex/Grid +
viewport实现单页多终端适配，避免映射管理成本
容易被误用的 hreflang 和 alternate 混淆点
有人试图把终端适配和语言适配混在一起，比如：
<link rel="alternate" hreflang="zh-CN" media="handheld" href="https://m.example.com/zh/">
这行代码同时违反两个规范：
-
hreflang值（如zh-CN）只能用于语言/区域标识，不能和media="handheld"共存；W3C 明确规定hreflang与media不兼容 -
handheld是已废弃的 media 类型，现代浏览器不识别，且 Google 不再支持该值 - Google 会直接忽略整条
<link>，甚至影响同页其他hreflang的解析
真正需要终端映射时，link rel="alternate" 的唯一合法用途是配合 media 声明打印样式表（media="print"）或可替换主题（rel="alternate stylesheet"），其他场景它只是个静态信号，不是控制开关。
