nginx 通过 map 指令解析 user-agent 动态设置 index 文件，实现多端首页适配：桌面加载 index.html，移动端加载 index-mobile.html，微信加载 index-wx.html，无需重定向、不依赖 js，seo 友好且响应快。
Nginx 的 index 指令本身不识别设备，但它可以配合 map 指令解析 User-Agent，动态指定首页文件名，从而实现不同设备访问时展示不同首页——整个过程无重定向、不依赖 JS，响应快且对 SEO 友好。
核心是用 map 预判设备类型，再让 index 加载对应文件
在 http 块中定义 UA 映射关系（注意：需 Nginx ≥ 1.19.1）：
map $http_user_agent $device_index {
default "index.html";
~*android|ios|mobile|iphone|ipad "index-mobile.html";
~*wechat|micromessenger "index-wx.html";
}
然后在 server 或 location 块中启用动态 index：
location / {
root /var/www/site;
index $device_index;
try_files $uri $uri/ =404;
}
这样，当用户访问 / 时：
- 桌面浏览器 → 尝试加载
/var/www/site/index.html - iPhone 或安卓设备 → 尝试加载
/var/www/site/index-mobile.html - 微信内置浏览器 → 尝试加载
/var/www/site/index-wx.html
确保这些 HTML 文件真实存在于 root 目录下，且命名准确、权限可读。
静态文件结构建议保持扁平
- ✅ 推荐：
/var/www/site/index.html、/var/www/site/index-mobile.html、/var/www/site/index-wx.html - ❌ 避免：把移动页放在
/mobile/index.html等子目录——index指令无法跨目录生效，必须靠rewrite或try_files配合，增加复杂度。
可选增强体验
- 在
index-mobile.html中加入<meta name="viewport" content="width=device-width">，保证移动端渲染正常 - 若需区分平板与手机，可在 map 中细化匹配（如排除
iPad后单独匹配Mobile）
不要用 if 判断替代 map
虽然 if ($http_user_agent ~* ...) 也能实现，但 if 在 location 中行为受限、易出错，且无法在 http 块中复用；map 是声明式、高性能、可复用的推荐方案。
配置完成后，记得 nginx -t 测试语法，再 nginx -s reload 生效。
