控制pc端和手機端顯示不同的頁面

這裏介紹2種方法來控制pc端和手機端顯示不同的頁面

1、使用nginx根據userAgent控制跳轉到不同的路徑或者不同的域名

set $flag 0;
if ( $http_user_agent ~* "(Android|iPhone|Windows Phone|UC|Kindle)" ){
    set $flag "${flag}1";
}
if ( $request_uri ~ "^/m/") {
    set $flag "${flag}2";
}
if ($flag = "01") {
    rewrite  ^/(.*)$  https://www.test.com/m$uri;
}

思路爲：根據nginx的 $http_user_agent 變量判斷當前是否是手機端，如果是手機端則將 $flag 的值變爲 01，如果訪問路徑爲以 /m/ 開頭則將變量變成 012 ，最後，如果 $flag 的值爲 01（即是手機端，但不是以 /m/ 開頭的訪問路徑），則在路徑的後面加上 /m ,實現頁面跳轉

2、java後端根據userAgent控制顯示不同的view

@RequestMapping("/test.html")
public ModelAndView test(@RequestHeader(value="User-Agent") String userAgent) {
    model.setViewName(isMobile(userAgent) ? "mobile/test" : "test");
    return model;
}

private boolean isMobile(String userAgent) {
    if (!StringUtils.isEmpty(userAgent)) {
        String agent = userAgent.toLowerCase();
        String[] mobileAgents = {"android", "phone", "mobi"};
        for (String mobileAgent : mobileAgents) {
            if (agent.indexOf(mobileAgent) > 0) {
                return true;
            }
        }
    }
    return false;
}

思路也很清楚，根據userAgent判斷如果是手機端，則渲染 mobile/test 視圖，否則渲染 test 視圖

本文內容到此結束，更多內容可關注公衆號：