Nginx PC端和移動端區分

時間 2020-12-02

標籤 php html android nginx web app iphone 網站 spa 設計欄目 Nginx 简体版

原文原文鏈接

如今隨着手機和pad的移動端普及，愈來愈多的用戶選擇使用移動客戶端訪問網站，而爲了獲取更好的用戶體驗，就須要針對不一樣的設備顯示出最合適的匹配，這樣就是近年來流行的「響應式web設計」。php

本文要講的的是如何使用nginx區分pc和手機訪問不一樣的網站，是物理上徹底隔離的兩套網站(一套移動端、一套pc端),這樣帶來的好處pc端和移動端的內容能夠不同，移動版網站不須要包含特別多的內容，只要包含必要的文字和較小的圖片，這樣會更節省流量。有好處固然也就會增長困難，難題就是你須要維護兩套環境，而且須要自動識別出來用戶的物理設備並跳轉到相應的網站，當判斷錯誤時用戶能夠本身手動切換回正確的網站。html

NGINX區分PC端和手機端配置android

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端和手機端的配置是如下這裏nginx

           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;

       }