Nginx 多端适配配置:基于 User-Agent 的动态资源分发
在移动互联网时代,网站通常需要为 PC 端、移动端(手机、平板)提供不同的页面或服务。Nginx 可通过解析客户端的User-Agent头(浏览器标识),自动将请求导向对应的资源或服务,实现多端适配。本文详细讲解 Nginx 多端适配的配置方法、场景示例及优化技巧。
多端适配原理:解析 User-Agent
客户端发起请求时,会在 HTTP 头中携带User-Agent(UA)信息,包含设备类型、浏览器版本等(如:
- PC 端:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
- 移动端:
Mozilla/5.0 (iPhone; CPU iPhone OS 16_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148
Nginx 通过$http_user_agent变量获取 UA 信息,结合正则匹配判断设备类型,进而分发到对应的资源或服务。
基础配置:静态资源多端适配
若 PC 端和移动端的静态资源(HTML、CSS、JS)存放在不同目录,可通过root指令动态切换根目录:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| server { listen 80; server_name example.com;
location / { # 默认指向PC端资源目录 root /var/www/pc;
# 匹配移动端UA,切换到移动端资源目录 if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry|iPad)') { root /var/www/mobile; }
# 索引页设置 index index.html index.htm; } }
|
配置说明
- 正则匹配规则:
~*表示不区分大小写匹配,(Android|iPhone|...)涵盖主流移动设备的 UA 特征;
- 目录结构:
- PC 端资源:
/var/www/pc/index.html
- 移动端资源:
/var/www/mobile/index.html
- 访问效果:PC 端访问
example.com加载pc/index.html,移动端访问则加载mobile/index.html。
进阶配置:反向代理多端服务
若 PC 端和移动端对应不同的后端服务(如 PC 端 API 和移动端 API),可通过proxy_pass反向代理到不同服务: