控制pc端和手机端显示不同的页面

待我称王封你为后i 2023-10-09 09:45 62阅读 0赞

这里介绍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 视图

本文内容到此结束，更多内容可关注公众号：

![2018111718160012.jpg][]

[2018111718160012.jpg]: https://img-blog.csdnimg.cn/2018111718160012.jpg