3行代码搞定自动跳转手机网站代码一文搞懂

域名服务器搞不懂？别慌，这是90%新手建站的第一道坎。今天不聊虚的，直接上手，一文搞懂如何用几行代码让电脑用户秒变手机用户。

需求分析：为什么你的站需要自动跳转

在西南做企业站，我发现一个共性：很多老板觉得“电脑端做好就行”。大错特错。

数据说话：根据CNZZ 2023年数据，移动端流量占比已突破78%。如果你的网站在手机上看起来像“被压缩过的报纸”，用户3秒内就会关掉。自动跳转不是“锦上添花”，是“生存刚需”。

痛点拆解：

体验割裂：手机用户点链接，页面乱飞，字小到看不清。
SEO受损：Google和百度都惩罚“移动不友好”网站。
转化率低：手机端加载慢、按钮小，询盘率直降40%。

解决方案：不是让你开发两套站，而是用智能识别+自动跳转，让不同设备看不同界面。核心逻辑：判断User-Agent → 判断手机 → 跳转到m.yourdomain.com。

环境准备：域名、服务器与备案三件套

很多新手卡在第一步：域名服务器搞不懂。其实就三步，我拆给你看。

1. 域名注册

选国内注册商（如阿里云、腾讯云），实名验证快。
后缀优先选.com或.cn，.cn对国内SEO更友好。
关键：确保域名已解析，ping yourdomain.com有响应。

2. 服务器部署

西南地区推荐选成都/重庆节点，延迟低、带宽足。
系统选CentOS 7+或Ubuntu 20.04，Nginx+PHP/LNMP配置。
内存：至少2G，硬盘SSD，不然PHP处理跳转逻辑会卡。

3. ICP备案

权威细节：必须通过工信部ICP备案系统提交，个人备案需身份证，企业需营业执照。
周期：7-20个工作日，期间网站不能访问。
坑点：备案时“网站名称”和实际业务要一致，别写“测试站”，会被驳回。

自检清单：

域名已实名、已解析
服务器IP已备案
www.yourdomain.com和m.yourdomain.com都能访问
SSL证书已安装（HTTPS必备）

核心步骤：三步实现自动跳转

第一步：创建手机站子域名 在域名解析面板，添加m记录，指向同一服务器IP。确保m.yourdomain.com能访问手机站（哪怕是个空页面也行，先跑通流程）。

第二步：选择跳转技术栈 别纠结“选JS还是选服务器端”，直接看场景：

纯前端（JS）：适合静态站、WordPress、Discuz等CMS，改一行代码就行。
服务器端（Nginx/Apache）：适合高并发、对SEO要求极严的站，性能更优。
混合方案：服务器端做主，前端做兜底，双保险。

第三步：编写跳转逻辑 核心是判断User-Agent。别用“iPhone|Android”这种粗暴匹配，用navigator.userAgent结合window.innerWidth，准确率更高。

代码/配置示例：可直接复制的实战代码

方案一：纯前端JS（适合90%场景）

把这段代码放在<head>标签后，所有页面通用：

// 自动跳转手机网站代码 - 前端JS版
(function() {var ua = navigator.userAgent;var isMobile = /Mobile|Android|iPhone|iPad|iPod|Windows Phone|IEMobile/i.test(ua);// 双重验证：用户代理 + 屏幕宽度var isSmallScreen = window.innerWidth < 768;// 避免重复跳转（已在手机站则不跳）if (isMobile && isSmallScreen && window.location.hostname.indexOf('m.') !== 0) {var url = window.location.href.replace(/^http/, 'https').replace(/^www\./, 'm.');window.location.replace(url);}
})();

关键行说明：

window.location.replace(url)：用replace而非assign，避免浏览器历史栈堆积，用户点“返回”不会死循环。
indexOf('m.') !== 0：防循环，已经在手机站就不跳了。
replace(/^www\./, 'm.')：精准替换，别用replace('www', 'm')，会误伤域名。

方案二：Nginx服务器端（性能最优）

在Nginx配置文件/etc/nginx/conf.d/yourdomain.conf中添加：

# 自动跳转手机网站代码 - Nginx服务器端
server {listen 80;server_name www.yourdomain.com;# 识别移动设备set $mobile 0;if ($http_user_agent ~* "(Android|iPhone|iPad|iPod|Mobile)") {set $mobile 1;}# 条件跳转：移动端 + 非m子域if ($mobile = 1) {rewrite ^(.*)$ https://m.yourdomain.com$1 permanent;}# 强制HTTPS（生产环境必须）if ($scheme != "https") {rewrite ^(.*)$ https://$host$1 permanent;}
}

关键行说明：

permanent：301永久重定向，SEO权重传递，别用302。
~*：忽略大小写匹配，Android/iPhone用户代理格式不一，必须加。
放在server块内，别放在location块，否则部分路径不生效。

Apache用户看这里：在.htaccess中添加：

# 自动跳转手机网站代码 - Apache版
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (Android|iPhone|iPad|iPod|Mobile) [NC]
RewriteCond %{HTTP_HOST} !^m\. [NC]
RewriteRule ^(.*)$ https://m.yourdomain.com/$1 [R=301,L]

常见报错：90%新手踩过的坑

坑1：无限跳转循环

现象：浏览器显示“重定向次数过多”。
原因：手机站也执行了跳转逻辑，或m.判断写错。
解决：检查indexOf('m.') !== 0是否生效；Nginx里确认server_name只匹配www.，不匹配m.。

坑2：HTTPS混合内容警告

现象：控制台报“Blocked mixed content”。
原因：HTTP页面跳转HTTPS，但页面内有HTTP资源（图片、JS）。
解决：全站强制HTTPS，资源链接统一用//或https://；Nginx加add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;。

坑3：某些手机不跳转