Nginx 配置移动端和电脑端自动双向跳转

原文出处

https://shiwenyuan.github.io/post/ck05d728...

场景

域名 描述
pc端 www.phpblog.com.cn 用于pc端访问官网
移动端 m.phpblog.com.cn 用于移动端访问

需求

在移动端访问www.phpblog.com.cn和m.phpblog.com.cn都跳转到m.phpblog.com.cn

实现方案

判断客户端的设备类型
要想让网站适配PC和手机设备,首先要能做出准确的判断。HTTP请求的Header中的User-Agent可以区分客户端的浏览器类型,可以通过User-Agent来判断客户端的设备。

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

20190904192816.png
Nginx 配置移动端和电脑端自动双向跳转

www/index.html

20190904192740.png
Nginx 配置移动端和电脑端自动双向跳转

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
20190904193613.png
Nginx 配置移动端和电脑端自动双向跳转

可以看到有两次http请求第一次请求m.phpblog.com.cn发生了一次重定向 ,重定向到到了www.phpblog.com.cn

此时在pc访问www.phpblog.com.cn
20190904194050.png
Nginx 配置移动端和电脑端自动双向跳转

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

此时在移动端访问m.phpblog.com.cn
20190904194641.png
Nginx 配置移动端和电脑端自动双向跳转

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

此时在移动端访问www.phpblog.com.cn
20190904194334.png
Nginx 配置移动端和电脑端自动双向跳转

可以看到有两次http请求第一次请求www.phpblog.com.cn发生了一次重定向,,重定向到到了 m.phpblog.com.cn

原理

nginx 利用每次http请求过来的浏览器ua来区分是移动端还是pc,然后做相应的跳转

相关文档

百度的官方建议
国外开源的通过User-Agent区分PC和手机的解决方案

原创不易,转载请注明出处

北行
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 2

一般移动端还会有一个转换为PC端访问的功能,所以还需要加一些判断,比如 cookie

1周前 评论
北行

@yanthink 如果有cookie的话一般设置好cookie的作用域应该就行了吧,比如我这上面的两个域名,作用域设置成phpblog.com.cn 应该就好了,跳转适配的核心我觉得就是pc 和移动端的地址,就像我上面写的那个其实是有一个前提的,就是url要一致,就像m.phpblog.com.cn/user和www.phpblog.com.cn/user 要都是有效路径。 个人拙见,欢迎给出意见。嘿嘿

1周前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!