最直接方式是用 JavaScript 解析 navigator.userAgent 判断 Mobile 等关键词，配合 location.replace() 延迟跳转；但服务端识别或响应式设计才是兼顾 SEO 与性能的长期方案。
用 User-Agent 字符串判断移动端最直接
浏览器请求头里的 User-Agent 是识别设备类型最常用、也最可控的方式。服务端做跳转更可靠，但如果你只能在 index.html 里纯前端处理，就得靠 JavaScript 解析 navigator.userAgent。
注意：这不是 100% 精准（比如某些安卓平板 UA 里也带 Mobile），但对绝大多数真实访问场景已足够稳定。
- 优先检测
Mobile关键词，比只看iPhone或Android更全面 - 避开
iPad误判——它 UA 里通常不含Mobile，但实际也是移动端，按需决定是否纳入 - 不要用屏幕宽度（
window.innerWidth）做唯一依据，横屏手机可能宽过 768px，而折叠屏或桌面模拟器会误导判断
location.replace() 跳转比 location.href 更干净
前端跳转必须避免历史栈污染，否则用户点返回会卡在空的 index.html 上反复循环。用 location.replace() 是标准做法，它会把当前页从历史记录中替换掉，不留痕迹。
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
if (/Mobile|Android|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
location.replace('/m/index.html');
} else {
location.replace('/pc/index.html');
}
- 正则用
i标志忽略大小写，覆盖各种 UA 变体 - 跳转路径用绝对路径（如
/m/index.html），避免相对路径在子目录下出错 - 不要用
window.location = 'xxx'，它等价于location.href，会留下历史记录
跳转前加个简单延迟，防白屏闪动
JS 执行和页面渲染有竞争，尤其低端安卓机上，可能刚显示 index.html 内容就立刻跳走，造成视觉闪烁。加个 100ms 延迟几乎无感，却能显著改善体验。
- 用
setTimeout包一层，延迟执行location.replace() - 不建议用
DOMContentLoaded或load事件，它们触发太晚，用户可能已经看到首页内容再跳走 - 如果项目已用框架（如 Vue/React），别在组件挂载后才判断——得在 HTML 的
<script>中尽早执行
真要兼顾 SEO 和首屏性能，别只靠前端跳转
纯前端跳转对搜索引擎不友好：index.html 本身没有实质内容，爬虫抓到的是空壳页，且无法区分移动/PC 版本的语义。
更合理的方案是服务端识别（Nginx / Node.js / PHP）并直接返回对应 HTML，或者用响应式设计 + viewport 元标签统一维护一套页面。前端跳转只是临时补救手段，不是长期解法。
另外，如果跳转目标页资源未预加载，用户会经历两次白屏——一次是 index.html，一次是 /m/index.html。这点容易被忽略。
