原文出處 https://shiwenyuan.github.io/post/ck05d728k0000fys6pin2i1eu.html

場景

需求

在移動端訪問www.phpblog.com.cn和m.phpblog.com.cn都跳轉(zhuǎn)到m.phpblog.com.cn

實現(xiàn)方案

判斷客戶端的設(shè)備類型
要想讓網(wǎng)站適配PC和手機設(shè)備，首先要能做出準(zhǔn)確的判斷。HTTP請求的Header中的User-Agent可以區(qū)分客戶端的瀏覽器類型，可以通過User-Agent來判斷客戶端的設(shè)備。

nginx原始配置

pc配置

server {
    listen       80;
    server_name  www.phpblog.com.cn;
    location / {
        root   www;
        index  index.html index.htm;
    }
}

移動端配置

server {
    listen       80;
    server_name  m.phpblog.com.cn;
    location / {
        root   m;
        index  index.html index.htm;
    }
}

m/index.html

image.png

www/index.html

image.png

nginx修改后配置

pc配置

server {
    listen       80;
    server_name  www.phpblog.com.cn;
    if ($http_user_agent ~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
            rewrite  ^(.*)    http://m.phpblog.com.cn$1 permanent;
        }
    location / {
        root   www;
        index  index.html index.htm;
    }
}

移動端配置

server {
    listen       80;
    server_name  m.phpblog.com.cn;
    if ($http_user_agent !~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
            rewrite  ^(.*)    http://www.phpblog.com.cn$1 permanent;
        }
    location / {
        root   m;
        index  index.html index.htm;
    }
}

此時在pc訪問m.phpblog.com.cn

image.png

可以看到有兩次http請求第一次請求m.phpblog.com.cn發(fā)生了一次重定向 ，重定向到到了www.phpblog.com.cn

此時在pc訪問www.phpblog.com.cn

image.png

可以看到有一次http請求第一次請求

此時在移動端訪問m.phpblog.com.cn

image.png

可以看到有一次http請求第一次請求

此時在移動端訪問www.phpblog.com.cn

image.png

可以看到有兩次http請求第一次請求www.phpblog.com.cn發(fā)生了一次重定向,，重定向到到了 m.phpblog.com.cn

原理

nginx 利用每次http請求過來的瀏覽器ua來區(qū)分是移動端還是pc，然后做相應(yīng)的跳轉(zhuǎn)

相關(guān)文檔

百度的官方建議
國外開源的通過User-Agent區(qū)分PC和手機的解決方案