欢迎光临
我的个人博客网站

nginx区分手机与电脑浏览器并进入相应站点

nginx增加如下配置,根据UA和cookie判断当前是移动端还是PC端访问

if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
  set $mobile_request '1';
}
if ($http_cookie ~ 'mobile_request=full') {
  set $mobile_request '';
}
if ($mobile_request = '1') {
  rewrite ^.+ http://m.lvtao.net$uri;
}

移动版页面添加PC版链接

默认用户进来时会先判断UA,如果是手机端访问就会进入手机版,但也会存在误判进入手机版或者需要更多信息进入PC版,那么就需要在移动版的页面放入代码,让用户可以从移动版切换到web版并且下次访问会保留设置。

<a onclick="setCookie('iphone_mode', 'full', 1, 'lvtao.net')" href="http://www.lvtao.net">电脑版</a>

如果用户访问不正确时,点击电脑版链接就可以进入PC版网站,并且24小时内再次访问会记忆上次访问的网站类型设置。

PC版网站增加访问手机版的链接

在PC版的网站适当的地方加入下面的链接让用户可以切换到手机版的网站。

<a onclick="deleteCookie('mobile_mode', 'lvtao.net');" href="http://m.lvtao.net">手机版</a>

完整的nginx端配置,当然是去掉了与本文功能无关的配置,并不是一个完可用的配置,只是给大家一个整体的框架。

PC版网站配置

upstream app_server {
  server 0.0.0.0:9001;
}

server {
  listen 80;
  server_name www.lvtao.net;

  root /path/to/main_site;
  # ...

  location / {
    proxy_set_header X-Real-IP $remote_addr;
    # ...

    if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
      set $mobile_request '1';
    }
    if ($http_cookie ~ 'mobile_request=full') {
      set $mobile_request '';
    }
    if ($mobile_request = '1') {
      rewrite ^.+ http://m.lvtao.net$uri;
    }

    # serve cached pages ...

    if (!-f $request_filename) {
      proxy_pass http://app_server;
      break;
    }
  }
}

手机移动版配置

upstream m_app_server {
server 0.0.0.0:9001;
}

server {
  listen 80;
  server_name m.lvtao.net;

  root /path/to/mobile_site;
  # ...

  location / {
    proxy_set_header X-Real-IP $remote_addr;
    # ...

    if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
      set $mobile_request '1';
    }
    if ($http_cookie ~ 'mobile_request=full') {
      set $mobile_request '';
    }
    if ($mobile_request != '1') {
      rewrite ^.+ http://www.lvtao.net$uri;
    }

    # serve cached pages ...

    if (!-f $request_filename) {
      proxy_pass http://m_app_server;
      break;
    }
  }
}
赞(1) 打赏
未经允许不得转载:张拓的天空 » nginx区分手机与电脑浏览器并进入相应站点
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏