本文详解如何在不依赖后端的前提下，通过 javascript 设备检测 + 合理执行时机 + 安全路径写法，实现 index.html 对移动设备的精准识别与定向跳转；同时说明纯 html 无法真正“检测设备”的技术边界，并提供 css 隐藏式降级方案作为无 js 备选。
本文详解如何在不依赖后端的前提下，通过 javascript 设备检测 + 合理执行时机 + 安全路径写法，实现 index.html 对移动设备的精准识别与定向跳转；同时说明纯 html 无法真正“检测设备”的技术边界，并提供 css 隐藏式降级方案作为无 js 备选。
在构建专为桌面端设计的静态项目（如特定尺寸的交互式演示、数据可视化大屏或艺术装置网页）时，常需主动限制移动端访问——并非“不兼容”，而是体验逻辑本身依赖宽屏、鼠标悬停或固定分辨率。遗憾的是，纯 HTML 无法完成设备类型判断：<meta name="viewport"> 仅控制缩放行为，<meta http-equiv="refresh"> 只能无条件跳转，而 <link media="..."> 或 CSS 媒体查询仅响应视口尺寸，无法区分“iPhone 横屏”与“Chrome 浏览器缩至 375px 的 Windows 笔记本”。真正的设备识别必须依赖 JavaScript 运行时能力。
✅ 推荐方案：健壮的 JavaScript 移动端检测与安全跳转
以下代码已综合 2026 年主流浏览器 UA 特性（包括 iOS Safari 隐私模式、Chrome for Android UA 精简、微信内置浏览器无 Mobile 标识等），并规避常见陷阱：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>桌面专属项目</title>
<script>
// 【高精度 UA 组合检测】兼顾现代浏览器 UA 弱化现实
function isMobileDevice() {
const ua = navigator.userAgent || '';
// 主要关键词：覆盖 iOS/Android/Windows Phone/国产浏览器
const mobileRegex = /(iPhone|iPad|iPod|Android|Mobile|BlackBerry|WebOS|IEMobile|Opera Mini|UCBrowser|MQQBrowser|MicroMessenger)/i;
// 兜底策略：UA 失效时（如隐私模式清空 UA），用屏幕宽度辅助判断
const isNarrow = screen.width <= 768;
return mobileRegex.test(ua) || isNarrow;
}
// 【关键：确保 DOM 加载完成后再执行跳转】
document.addEventListener('DOMContentLoaded', () => {
if (isMobileDevice()) {
// ✅ 正确写法：跳转到子域 m.example.com（需替换为实际域名）
window.location.replace('https://m.example.com/');
// ✅ 或跳转到同域子路径（如 /mobile/）
// window.location.replace('/mobile/');
// ❌ 错误示例（绝对禁止）：
// window.location.href = 'm/index.html'; // → 变成 https://example.com/m/index.html（非子域！）
// window.location.href = '//m.example.com/'; // → HTTP 页面中协议相对地址将失效
}
});
</script>
</head>
<body>
<!-- 桌面端专属内容 -->
<h1>欢迎来到桌面端体验区</h1>
<p>本页面专为 ≥1280px 宽度显示器优化，请使用电脑访问。</p>
</body>
</html>⚠️ 必须规避的三大陷阱：
- 执行时机错误：将 window.location 写在 <head> 中或 DOMContentLoaded 之前，会导致白屏闪跳、SEO 内容丢失，甚至被 CDN 安全策略拦截；
- UA 判断过于简单：仅检测 "Android" 或 "iPhone" 漏判率超 30%（iOS Safari 默认隐藏 Mobile，部分安卓定制系统删减 UA）；
- 路径写法错误：子域跳转必须带完整协议（https://m.example.com/），不可省略 https:// 或使用 // 协议相对地址。
? 无 JavaScript 备选方案：CSS 视口隐藏（非阻断，仅视觉屏蔽）
若因合规要求完全禁用 JS，可通过媒体查询隐藏内容，但无法阻止用户手动缩放或查看源码，仅作友好提示：
<head>
<style>
/* 默认显示 */
body { display: block; }
/* 小屏设备隐藏主体内容 */
@media screen and (max-width: 768px) {
body {
display: none;
}
/* 插入移动端友好提示 */
.mobile-notice {
display: block;
text-align: center;
padding: 4rem 1rem;
font-size: 1.2rem;
color: #666;
}
}
</style>
</head>
<body>
<div class="mobile-notice">
<h2>该体验专为桌面端设计</h2>
<p>建议使用电脑浏览器访问以获得最佳效果</p>
</div>
<!-- 桌面端内容在此 -->
</body>? 技术本质提醒：@media (max-width: 768px) 检测的是当前视口宽度，不是设备类型。它会把缩放后的桌面浏览器也纳入范围，因此仅适用于“响应式降级”场景，不可替代真设备检测。
立即学习“前端免费学习笔记（深入）”；
✅ 总结：生产环境最佳实践清单
- ✅ 使用 DOMContentLoaded 包裹跳转逻辑，确保 HTML 解析完成；
- ✅ UA 检测采用 (iPhone|iPad|Android|Mobile) 正则 + screen.width 双校验；
- ✅ 子域跳转必须写全协议 https://m.example.com/；
- ✅ 禁用 navigator.platform（已不可信）和 userAgent.indexOf('Win')（Windows Phone 残留干扰）；
- ✅ 如需更高可靠性，应在服务端（如 Nginx、CDN 边缘函数）进行 UA 判断并返回 302 重定向——这是 SEO 友好且不可绕过的终极方案。
真正的设备控制权不在前端 HTML，而在运行时逻辑与服务端协同。理解这一边界，才能构建既稳健又符合现代 Web 架构的访问控制策略。
