现在很多网站都是有了PC端和H5站点的,因为这样就可以根据客户设备的不同,显示出体验更好的,不同的页面了。

这样的需求有人说拿自适应就可以搞定,比如我们常说的bootstrap和24格布局法,这些确实是非常好的方案,但是无论是复杂性和易用性上面还是不如分开编写的好,比如我们常见的淘宝、京东......这些大型网站就都没有采用自适应,而是用分开制作的方式。

那分开制作如何通过配置Nginx来识别出应该展示哪个页面那?我们这节课就来学习一下。

$http_user_agent的使用:

Nginx通过内置变量$http_user_agent,可以获取到请求客户端的userAgent,就可以用户目前处于移动端还是PC端,进而展示不同的页面给用户。

操作步骤如下:

  1. 在/usr/share/nginx/目录下新建两个文件夹,分别为:pc和mobile目录
cd /usr/share/nginx
mkdir pc
mkdir mobile
  1. 在pc和 mobile 目录下,新建两个index.html文件,文件里下面内容
<h1>I am pc!</h1>
<h1>I am mobile!</h1>
  1. 进入etc/nginx/conf.d目录下,修改8001.conf文件,改为下面的形式:
server{
        listen 80;
        server_name nginx2.test.com;
        location / {
         root /usr/share/nginx/pc;
         if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
            root /usr/share/nginx/mobile;
         }
         index index.html;
        }
}