使用Nginx根据User-Agent实现PC与移动端自动跳转

admin

2 月，3 周前更新

0 110 0

导语：

在当今互联网时代，用户通过各种设备访问网站，为了提供最佳的用户体验，针对不同设备进行适配至关重要。其中，最常见的需求就是根据用户访问设备的不同，自动跳转到相应的 PC 端或移动端页面。本文将介绍如何使用 Nginx，根据 User-Agent 实现 PC 与移动端的自动跳转，让您的网站更具智能和响应式。

正文：

User-Agent 的概念

User-Agent 是 HTTP 请求头中的一个字段，它包含了发起请求的客户端（通常是浏览器）的相关信息，例如操作系统、浏览器类型、版本号等。通过分析 User-Agent，我们可以判断用户正在使用哪种设备访问网站，从而进行相应的处理。

以下是一些常见的 PC 和移动端 User-Agent 示例：
- PC 端 (Chrome):
  
  auto Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
- 移动端 (iOS Safari):
  
  auto Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1 Mobile/15E148 Safari/604.1
- 移动端 (Android Chrome):
  
  auto Mozilla/5.0 (Linux; Android 10; Pixel 4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.120 Mobile Safari/537.36
Nginx 配置实现跳转

Nginx 是一款高性能的 HTTP 服务器和反向代理服务器，它提供了强大的配置能力，可以方便地实现各种需求，包括根据 User-Agent 进行跳转。

Nginx 主要使用 map 指令和 if 指令来实现跳转。map 指令用于定义 User-Agent 的匹配规则，if 指令用于根据匹配规则进行重定向。

以下是 Nginx 配置代码示例：

```nginx http { # 使用 map 指令来检测用户代理字符串，并判断是否为移动设备 map $http_user_agent $mobile_device { # 默认值为 0，表示非移动设备 default 0; # 如果用户代理包含以下关键词，则认为是移动设备，设置为 1 ~*android|iphone|ipod|ipad 1; }
```
server {
    # 监听 HTTP 端口 80
    listen 80;
    # 设置服务器名称，替换为实际的域名
    server_name yourdomain.com; # 将 yourdomain.com 替换为您的域名

    # 如果 $mobile_device 为 1，则重定向到移动端网站
    if ($mobile_device = 1) {
        # 永久重定向到移动端网站
        rewrite ^(.*)$ https://m.yourdomain.com$1 permanent; # 将 m.yourdomain.com 替换为您的移动端域名
    }

    location / {
        # 配置 PC 端网站的根目录
        root /var/www/yourdomain.com; # 将 /var/www/yourdomain.com 替换为你的 PC 端网站根目录
        # 设置默认的首页文件
        index index.html index.htm;
    }
}
```
} ```

配置解释：
- map $http_user_agent $mobile_device { ... }：定义一个 map 指令，将 User-Agent ($http_user_agent) 映射到 $mobile_device 变量。
- default 0;：设置默认值为 0，表示不是移动端。
- ~*android|iphone|ipod|ipad 1;：使用正则表达式匹配常见的移动端 User-Agent，如果匹配成功，则 $mobile_device 的值为 1。
- if ($mobile_device = 1) { ... }：如果 $mobile_device 的值为 1，则执行跳转。
- rewrite ^(.*)$ https://m.yourdomain.com$1 permanent;：将用户重定向到移动端域名，permanent 表示 301 永久重定向。
- location / { ... }：配置 PC 端网站的根目录和其他相关设置。
配置注意事项
- 缓存问题： 浏览器和 CDN 可能会缓存跳转规则，导致跳转失效。建议使用 301 永久重定向，并清理浏览器缓存。
- SEO 优化： 使用 301 永久重定向有助于搜索引擎理解跳转规则，并进行正确的索引。
- 移动端域名： 确保您的移动端域名配置正确，并且可以正常访问。
- User-Agent 的复杂性： User-Agent 可能非常复杂，需要根据实际情况调整匹配规则。
总结

通过使用 Nginx 的 map 和 if 指令，我们可以轻松实现根据 User-Agent 进行 PC 与移动端自动跳转。这种方法简单高效，可以提升用户体验，并对搜索引擎优化有所帮助。