网站移动端跳转配置，手机自动跳转移动端页面

知识分享

2026-09-19 03:00

14 阅读

用户在手机上打开网站时，如果看到的还是 PC 版窄小布局，体验会很差。网站移动端跳转配置的目标，就是让手机浏览器自动打开移动端页面（如 m.example.com 或响应式页面）。
下面按零基础也能照做的顺序，讲清准备、操作、避坑和验证。

先判断该用哪种跳转方案

不是所有网站都需要独立移动端域名。
如果页面本身用了响应式布局（同一套 HTML 适配所有屏幕），通常无需跳转；
只有当 PC 站和移动站是两套独立代码或域名时，才需要做自动跳转。

常见三种做法：Nginx 层面按 User-Agent 判断、宝塔面板可视化配置、前端 JavaScript 判断。Nginx 方案效率最高且对搜索引擎友好，优先推荐。

操作前请确认：

编辑站点配置文件，路径通常在 /www/server/panel/vhost/nginx/你的域名.conf（宝塔）或 /etc/nginx/conf.d/你的域名.conf。

在 server {} 块内加入：

if ($http_user_agent ~* "(android|iphone|ipad|ipod|mobile|blackberry|windows phone)") {
    return 302 https://m.example.com$request_uri;
}

保存后执行检查并重载：

nginx -t
nginx -s reload

看到 syntax is ok 和 test is successful 才算配置生效。302 是临时跳转，
若移动站永久替代 PC 站，
可改用 301，
但要谨慎，
301 会被浏览器长期缓存。

如果不想手写配置，登录宝塔面板，进入「网站」→ 找到目标站点 → 点击「设置」→「配置文件」，把上面的 if 代码粘贴到 server 块内，保存后点击「重载配置」。

宝塔会在保存时自动做语法检查，若报错通常是花括号不匹配或缺少分号。
此时回退到备份文件再排查。

当无法修改服务器配置时，可在 PC 站公共头部模板加入：

if (/Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent)) {
    window.location.href = "https://m.example.com" + location.pathname;
}

这种方式依赖浏览器执行 JS，且对爬虫不友好，只建议作为临时应急方案，不建议长期使用。

避免跳转死循环：移动站页面不要再包含同样的跳转脚本，否则手机访问会反复跳转。
不要对爬虫跳转：百度、Google 的蜘蛛 UA 不包含手机标识，但部分爬虫会模拟手机 UA，建议在 if 条件中排除 Baiduspider、Googlebot。
保留原路径：使用 $request_uri 传递原路径，避免所有手机用户都被跳到首页。
HTTPS 要一致：PC 站是 HTTPS，移动站也要用 HTTPS，否则浏览器会提示不安全。

用手机浏览器访问 PC 站域名，观察是否自动跳到移动站。
也可用 curl 模拟手机 UA：

curl -I -A "Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X)" https://example.com

返回结果中若出现 HTTP/1.1 302 且 Location 指向移动站，
即配置成功。每次修改 Nginx 配置后都要先 nginx -t 再 reload，
这是避免网站打不开的关键习惯。

如果跳转后样式错乱，检查移动站是否引用了正确的 CSS；
如果跳转不生效，优先确认 if 语句是否写在正确的 server 块内。