NginxPC端和移动端区分

现在随着手机和pad的移动端普及，越来越多的用户选择使用移动客户端访问网站，而为了获取更好的用户体验，就需要针对不同的设备显示出最合适的匹配，这样就是近年来流行的“响应式web设计”。

本文要讲的的是如何使用nginx区分pc和手机访问相同的网站，是代码上完全隔离的两套网站(一套移动端、一套pc端),这样带来的好处pc端和移动端 的内容可以不一样，移动版网站不需要包含特别多的内容，只要包含必要的文字和较小的图片，这样会更节省流量。有好处当然也就会增加困难，难题就是你需要维护两套环境，并且需要自动识别出来用户的物理设备并跳转到相应的网站，当判断错误时用户可以自己手动切换回正确的网站。

 

NGINX区分PC端和手机端配置

server
    {
        listen 80;
        server_name  mike.com;
        index index.php index.html index.htm default.html default.htm default.php;
        root  /www/site/mike.com;


       add_header Set-Cookie "site_type=1;Path=/";
           set $is_mobile no;
       if ($http_user_agent ~* "(mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)") {

           set $is_mobile yes;

       }

       location / {
            add_header Access-Control-Allow-Origin *;
            if ($is_mobile = "yes") {
            root /www/site/mike.com/m;
            }
            ssi on;
        }
          
       location /m {
            ssi on;

       }

        location /uploads {

          proxy_pass http://www.baidu.com/uploads/;

        }


          location  /site_app/  {

       alias  /www/site/app/;
        
        }


        location = /favicon.ico {
            log_not_found off;
            access_log off;
        }


      location ~ /.  {
           deny all;
           access_log off;
           log_not_found off;
       }

}

其中主要区分PC端和手机端的配置是以下这里

           set $is_mobile no;
       if ($http_user_agent ~* "(mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)") {

           set $is_mobile yes;

       }

       location / {
            add_header Access-Control-Allow-Origin *;
            if ($is_mobile = "yes") {
            root /www/site/mike.com/m;
            }
            ssi on;
        }
          
       location /m {
            ssi on;

       }

根据网站根路径下目录进行区分的，PC 端路径代码是  /www/site/mike.com，移动端端路径代码是  /www/site/mike.com/m

这样就可以电脑打开自动判断到PC端路径下的代码，手机打开直接判断到 移动端路径下的代码

实现功能：

PC端输入打开  mike.com  URL自动跳到PC端代码下

移动端输入打开 mike.com  URL自动跳到移动端代码下

这样做的好处都是同一个域名，不用申请或者使用过多的二级域名~~~

本文分享完毕，感谢支持点赞~~