如何配置location块实现移动端与PC端自动分流-Nginx-PHP中文网

核心是先识别设备类型再差异化处理：用map预定义$device_type变量匹配UA特征，按类型用alias指向不同静态资源目录，或按/m/、/pc/路径前缀分流，或基于UA跨子域名301/302跳转。

如何配置location块实现移动端与pc端自动分流

核心是先识别设备类型，再结合路径规则做差异化处理。推荐用 map 预定义变量，避免在 server 级大量使用 if，兼顾性能和可维护性。

用 map 指令统一识别设备类型

在 http 块顶部添加如下配置，定义 $device_type 变量：

匹配主流移动 UA 特征（iPhone、iPad、Android、Mobile 等），不区分大小写
未匹配则默认为 desktop
该变量后续可在任意 location 中直接引用

示例：

map $http_user_agent $device_type {
    ~*"(iPhone|iPad|iPod|Android|Mobile|Fennec|Windows Phone)" "mobile";
    default "desktop";
}

按设备类型提供不同静态资源目录

适用于统一访问路径（如 /static/xxx.png），但需返回不同物理文件的场景。注意必须用 alias，不能用 root（root 不支持条件切换）：

移动资源放在 /var/www/static/mobile/
桌面资源放在 /var/www/static/desktop/
alias 路径末尾必须带斜杠，且与 location 的斜杠严格对应（如 location /static/ → alias /path/）

示例：

location /static/ {
    if ($device_type = "mobile") {
        alias /var/www/static/mobile/;
    }
    if ($device_type = "desktop") {
        alias /var/www/static/desktop/;
    }
    expires 1h;
    add_header Cache-Control "public";
}

按路径前缀轻量分流（推荐初用）

不依赖 UA 判断，通过 URL 路径显式区分，简单稳定，适合前后端已约定好路径规范的项目：

移动端请求走 /m/ 开头路径，PC 端走 /pc/ 或根路径
用 location ^~ /m/ 明确前缀匹配，防止被普通前缀覆盖
配合 try_files 或 proxy_pass 指向对应后端或资源目录

示例：

location ^~ /m/ {
    alias /var/www/mobile/;
    index index.html;
}
<p>location ^~ /pc/ {
alias /var/www/pc/;
index index.html;
}</p><p>location / {
root /var/www/pc;
index index.html;
}</p>

基于 UA 实现跨子域名自动跳转

适合已有 www.example.com 和 m.example.com 两个独立站点的架构：

PC 域名下检测到移动 UA，301 跳转至 m.example.com
移动域名下检测到非移动 UA，302 跳转回 www.example.com
permanent 表示 301，redirect 表示 302；注意重定向会增加一次 HTTP 请求

PC server 示例：

server {
    server_name www.example.com;
    if ($http_user_agent ~* "(android|iphone|ipad|blackberry)") {
        rewrite ^(.*)$ https://m.example.com$1 permanent;
    }
    location / {
        root /var/www/pc;
        index index.html;
    }
}

移动 server 示例：

server {
    server_name m.example.com;
    if ($http_user_agent !~* "(android|iphone|ipad|blackberry)") {
        rewrite ^(.*)$ https://www.example.com$1 redirect;
    }
    location / {
        root /var/www/mobile;
        index index.html;
    }
}