Nginx 的 index 指令本身不区分设备类型，需结合 map 或 if 判断 $http_user_agent 实现移动端页面加载，推荐用 map 预定义 $device_type 并配合 root 或 try_files 动态适配路径。
在 Nginx 中，index 指令本身**不区分设备类型**，它只负责指定目录下的默认文件名（如 index.html），无法直接识别移动端并自动切换页面。要实现“移动端专属页面加载”，需结合 index 与 if、map 或重写逻辑，通过用户代理（$http_user_agent）判断设备，并动态设置根目录或跳转路径。
用 map 模块预判设备类型，统一管理 root 路径
推荐使用 map 指令提前解析 UA，避免在每个 location 中重复判断。在 http 块中定义：
map $http_user_agent $device_type {
~*(iPhone|iPad|iPod|Android) mobile;
default desktop;
}然后在 server 或 location 中根据 $device_type 设置不同根目录：
root /var/www/$device_type; index index.html;
此时，访问 / 时，Nginx 会尝试加载 /var/www/mobile/index.html（移动端）或 /var/www/desktop/index.html（桌面端）。注意：root 后不能拼接绝对路径变量以外的内容，且目录需真实存在、权限正确。
配合 try_files 实现优雅降级与路径适配
若移动端页面放在子目录（如 /m/），不希望改变 root，可用 try_files + rewrite 或内部重定向：
- 先检查是否存在移动端版本：
try_files $uri/m/index.html $uri/index.html =404; - 更灵活的做法：用
if判断 UA 并重写请求路径（仅限 location 内使用）：
location / {
if ($device_type = mobile) {
rewrite ^/(.*)$ /m/$1 break;
}
index index.html;
try_files $uri $uri/ =404;
}这样，所有移动端请求都会被内部映射到 /m/ 下，而 index 指令自然作用于新路径（即优先找 /m/index.html）。
避免常见陷阱：缓存、重定向与静态资源路径
启用设备识别后，需同步调整以下配置，否则页面可能错乱或加载失败：
-
禁止对 HTML 缓存设备无关响应：在 server 块中添加
add_header Vary "User-Agent";，确保 CDN 或浏览器缓存能区分移动/桌面版本。 -
确保 CSS/JS 路径兼容：移动端页面里的资源链接应使用相对路径（如
./css/style.css）或带前缀的绝对路径（如/m/css/style.css），避免硬编码为/css/导致 404。 -
慎用 302 重定向替代内部 rewrite：用
return 302 /m/;会暴露路径、增加请求次数，且破坏 SPA 的 history 路由；优先选rewrite ... break或try_files。
验证与调试建议
部署后务必测试实际效果：
- 用 curl 模拟 UA：
curl -H "User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X)" http://yoursite.com/ - 检查响应头是否含
Vary: User-Agent - 查看 Nginx 错误日志（
error_log）排查路径未找到或权限拒绝问题 - 确认移动端页面中引用的资源（图片、字体等）均能 200 加载，必要时统一配置
location ~* \.(js|css|png|jpg|gif)$ { }避免路径歧义
