Nginx 入门实践：适配 PC 或移动设备

13. PC或移动设备适配

根据不同的用户设备返回不同风格的网站。过去经常使用纯前端自适应布局，但无论复杂性和易用性，仍然不如单独编写。比如我们联合淘宝、京东...这些大型网站不采用自适应，而是采用单独的制作方式，根据用户请求user-agent来判断是返回PC还是H5网站。

首先在文件夹mkdir下新建两个文件夹PC和mobile。 ，vim编辑两个index.html，写一些内容。

cd /usr/share/nginx/html
mkdir pc mobile
cd pc
vim index.html   # 随便写点比如 hello pc!
cd ../mobile
vim index.html   # 随便写点比如 hello mobile!
复制代码

然后进入文件夹/etc/nginx/conf.d新建一个配置文件fe.sherlocked93.club.conf，就像为辅助配置虚拟主机时一样域名。 ：

# /etc/nginx/conf.d/fe.sherlocked93.club.conf

server {
  listen 80;
	server_name fe.sherlocked93.club;

	location / {
		root  /usr/share/nginx/html/pc;
    if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
      root /usr/share/nginx/html/mobile;
    }
		index index.html;
	}
}
复制代码

的配置基本相同。它本质上添加了一个 if 语句，然后使用全局变量 $http_user_agent 来确定用户请求的 用户代理。指向不同的根路径并返回对应的位置。

在浏览器中访问该站点，然后在F12中使用手机模拟访问：

可以看到，当使用移动端模拟访问时，Nginx返回了该站点对应移动端的html。

作者：SHERlocked93