适配pc端和移动端

👄 需求

在开发中，我们常常会遇到这样的需求：根据用户设备的不同，返回对应样式的页面。说白了，就是我在pc端看到的页面样式和布局，要跟移动端的不一样。

通常，我们使用自适应的前端框架（比如bootstrap），就可以达到这样的需求。这种方法不能说不行，但是（关键是这句😓），如果把pc端和移动端都写到一块儿，就会提高代码的复杂度，降低代码的灵活性。

这样的例子太多了，我曾经在做网站的时候，老板👨要求在pc端和移动端不光显示的样式、布局不同，连显示的内容模块都要不同。pc端显示甲模块、乙模块，移动端显示甲模块、丙模块，没过两天，需求又变了，pc端要显示甲模块、乙模块，还有丙模块，移动端去掉丙模块，添加丁模块。......太血腥了😱

所以，对自己好一点，如果条件允许，还是把pc端和移动端分开写为好。京东、淘宝......这些大网站也是这么干的。

💭 思路

如果我们写好了两套方案：pc端和移动端，那怎么部署呢？这是就需要nginx大显身手了。在nginx中，可以根据用户请求的user-agent来判断是返回pc端还是移动端。

💪 开干

在nginx.conf文件中添加配置：

server {
        listen 8081;
        server_name 127.0.0.1;

        location / {
            root /home/py/myDevelop/testNginx/pc/;

            if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
                root /home/py/myDevelop/testNginx/mobile/;
            }
            
            index  index.html index.htm;
        }

    }

说明：这里就是用了一个if语句，使用$http_user_agent全局变量来判断用户请求的user-agent，指向不同的root路径，返回对应站点。

这样就可以达到目的了。

---（完）---