核心原理
自动跳转的核心逻辑是：检测用户当前使用的设备类型（是手机还是电脑），如果是手机，则执行页面跳转。
（图片来源网络，侵删）
设备检测通常通过以下两种方式实现：
- 检测浏览器 User-Agent (用户代理)：这是最传统、最常见的方法，User-Agent 是一个字符串，浏览器和操作系统会通过它向服务器声明自己的身份，iPhone 的 User-Agent 里通常包含 "iPhone" 或 "Mobile" 字样。
- 检测屏幕宽度：这是一种更现代的方法，通过检测浏览器窗口的宽度来判断是否为移动设备，如果宽度小于某个阈值（如768px），就认为是手机。
下面我们介绍几种具体的实现方法。
使用 JavaScript 检测 User-Agent (最常用)
这是最灵活的方法,可以在不刷新页面的情况下完成跳转，并且可以轻松地集成到现有的任何网站中。
代码示例
将以下代码放在您网站的 <head> 标签内。
（图片来源网络，侵删）
<script>
function checkAndRedirect() {
// 获取浏览器的 User-Agent
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
// 定义常见的移动设备关键词
// 注意：这个列表不是绝对的，可以根据需要扩展
var isMobile = /android|iphone|ipod|ipad|blackberry|opera mini|iemobile|windows phone/i.test(userAgent);
if (isMobile) {
// 如果是移动设备，跳转到手机网站
// 请将 'https://m.yourdomain.com' 替换为您的手机网站地址
window.location.href = "https://m.yourdomain.com";
}
}
// 页面加载完成后立即执行检测
checkAndRedirect();
</script>
代码解析
function checkAndRedirect(): 定义一个函数来执行检测和跳转逻辑。navigator.userAgent: 获取当前浏览器的 User-Agent 字符串。navigator.vendor和window.opera是为了兼容一些特殊浏览器（如旧版 Opera）。/.../i.test(userAgent):- 这是一个正则表达式匹配。
android|iphone|ipod|ipad|...：匹配这些关键词中的任意一个。i：表示不区分大小写（能匹配 "iPhone" 也能匹配 "iphone"）。.test()方法如果字符串中包含匹配项，则返回true，否则返回false。
if (isMobile): 如果检测结果是移动设备，就执行跳转。window.location.href = "...": 将当前页面的 URL 更改为手机网站的地址，从而实现跳转。checkAndRedirect(): 调用函数，使其在页面加载时执行。
使用响应式设计 (推荐的最佳实践)
对于现代网站,强烈推荐使用响应式设计，而不是自动跳转，响应式设计可以根据用户的屏幕尺寸，动态地调整网站的布局和内容，让同一套网站在手机和电脑上都有良好的体验。
为什么推荐响应式设计？
- URL 统一：用户无论用什么设备访问，都是同一个网址，这有利于 SEO（搜索引擎优化），也方便用户分享和收藏。
- 体验流畅：不需要跳转，页面内容无缝切换。
- 维护简单：只需要维护一套代码，而不是两套独立的网站。
如何实现响应式设计？
主要依靠 CSS3 Media Queries (媒体查询)。
示例代码：
（图片来源网络，侵删）
在您的 CSS 文件中添加以下代码：
/* 默认样式：针对电脑等大屏幕设备 */
body {
font-size: 16px;
background-color: #f0f0f0;
}
.container {
width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* 当屏幕宽度小于等于 768px 时，应用以下样式（针对平板和手机） */
@media (max-width: 768px) {
body {
font-size: 14px; /* 字体变小 */
background-color: #e0e0e0;
}
.container {
width: 100%; /* 容器宽度占满屏幕 */
padding: 10px;
box-sizing: border-box; /* 让 padding 不会增加总宽度 */
}
/* 可以在这里隐藏电脑端才有的元素，或调整布局 */
.desktop-only {
display: none;
}
}
/* 当屏幕宽度小于等于 480px 时，应用以下样式（针对小屏手机） */
@media (max-width: 480px) {
body {
font-size: 12px;
}
.container {
padding: 5px;
}
}
如何结合使用？ 您可以将 方法一的 JavaScript 和 方法二的 CSS 结合起来，当检测到移动设备时，可以加载一个移动端专用的 CSS 文件，或者隐藏/显示某些元素，而不是直接跳转。
<head>
<!-- 默认加载电脑版样式 -->
<link rel="stylesheet" href="style.css">
<!-- 检测设备并加载移动端样式 -->
<script>
function checkAndLoadMobileCSS() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
var isMobile = /android|iphone|ipod|ipad|blackberry|opera mini|iemobile|windows phone/i.test(userAgent);
if (isMobile) {
// 创建一个 link 元素来加载移动端样式
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'mobile-style.css'; // 你的移动端样式文件
document.head.appendChild(link);
}
}
checkAndLoadMobileCSS();
</script>
</head>
使用服务器端跳转 (PHP 示例)
这种方法在服务器端完成检测,然后返回相应的页面，优点是搜索引擎爬虫可以正确识别手机版网站，但需要服务器端支持。
PHP 代码示例 (index.php)
<?php
// 获取 User-Agent
$userAgent = $_SERVER['HTTP_USER_AGENT'];
// 定义移动设备关键词
$mobileKeywords = array('android', 'iphone', 'ipod', 'ipad', 'blackberry', 'opera mini', 'iemobile', 'windows phone');
// 检查 User-Agent 是否包含任何移动设备关键词
foreach ($mobileKeywords as $keyword) {
if (stripos($userAgent, $keyword) !== false) {
// 如果是移动设备，跳转到手机网站
header('Location: https://m.yourdomain.com');
exit; // 确保在跳转后停止脚本执行
}
}
// 如果不是移动设备，继续加载电脑版网站内容
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">电脑版网站</title>
</head>
<body>
<h1>欢迎访问电脑版网站</h1>
<p>您正在使用电脑或平板设备。</p>
</body>
</html>
代码解析
$_SERVER['HTTP_USER_AGENT']: 在 PHP 中获取客户端的 User-Agent 信息。stripos($haystack, $needle): 查找字符串中是否包含另一个字符串（不区分大小写）。header('Location: ...'): 发送一个 HTTP 重定向头，告诉浏览器跳转到新地址。exit;: 在发送重定向头后，立即终止脚本的执行，非常重要。
总结与对比
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| JavaScript 跳转 | 实现简单，易于集成。 不需要服务器支持。 可以灵活控制跳转时机。 |
对 SEO 不友好（搜索引擎可能无法正确索引手机版）。 可能被浏览器插件或用户设置禁用。 |
快速为现有网站添加移动跳转，或用于特定场景（如内部系统）。 |
| 响应式设计 | SEO 友好，URL 统一。 用户体验最佳，无跳转延迟。 维护成本低，一套代码适配所有设备。 |
需要从零开始设计或重构网站。 对于极其复杂的网站，CSS 可能会变得很庞大。 |
所有现代网站的首选方案。 |
| 服务器端跳转 | 对 SEO 最友好，搜索引擎能正确识别手机版。 可靠性高，不受浏览器设置影响。 |
需要服务器端支持（如 PHP, .NET, Node.js）。 维护两套代码，相对复杂。 |
对 SEO 要求极高的商业网站，或需要为搜索引擎提供专门移动页面的场景。 |
最终建议：
- 新项目：请务必选择 响应式设计。
- 旧项目改造：如果不想重构，可以使用 JavaScript 跳转 作为临时解决方案。
- 追求极致 SEO：如果网站对搜索引擎排名要求非常高，可以考虑 服务器端跳转，并结合响应式设计。
