Nginx区分PC或手机访问不同网站

近几年来,随着手机和pad的普及,越来越多的用户选择使用移动客户端访问网站,而为了获取更好的用户体验,就需要针对不同的设备显示出最合适的匹配,这样就是近年来流行的“响应式web设计”。

响应式web设计是一种纯前端技术js、css等实现的针对不同设备访问同一网址看到不同的布局,是页面内容更适合当前设备阅读。但这个不是本文的重点,重点还是放在nginx如何实现上来。

本文要讲的的是如何使用nginx区分pc和手机访问不同的网站,是物理上完全隔离的两套网站(一套移动端、一套pc端),这样带来的好处pc端和移动端 的内容可以不一样,移动版网站不需要包含特别多的内容,只要包含必要的文字和较小的图片,这样会更节省流量。有好处当然也就会增加困难,难题就是你需要维 护两套环境,并且需要自动识别出来用户的物理设备并跳转到相应的网站,当判断错误时用户可以自己手动切换回正确的网站。

下面以264查询网为实例来说明如何实现上面的需求。 明确的的需求: 1.制作两个站点PC端网站www.264.cn,和移动端网站m.264.cn 2.使用pc或移动设备访问任何一个域名都会跳到相应的站点。 3.用户可以选择访问移动版还是PC版网站,移动版网站始终有切换到PC版的链接,PC版当网站通过手机访问时会提供移动版网站的链接。 4.当用户选着访问其中一种类型的网站后,保存设置结果生效时间为24小时,当然长短可以自己设置。 简单的服务器端实现方法 有两套网站代码,一套PC版放在/usr/local/website/web,一套移动版放在/usr/local/website/mobile。只需要修改nginx的配置文件件,nginx通过UA来判断是否来自移动端访问,实现不同的客户端访问不同内容。 这种方法的缺点是移动端和PC端用同一个域名,存在黑帽的嫌疑,而且UA并不是总是判断的准确,如果判断错误的情况下,用户不能手动修改访问的网站类型。 关键的Nginx配置如下:

location / {
	#默认PC端访问内容    root /usr/local/website/web;

	#如果是手机移动端访问内容    if ( $http_user_agent ~ "(MIDP)|(WAP)|(UP.Browser)|(Smartphone)|(Obigo)|(Mobile)|(AU.Browser)|(wxd.Mms)|(WxdB.Browser)|(CLDC)|(UP.Link)|(KM.Browser)|(UCWEB)|(SEMC\-Browser)|(Mini)|(Symbian)|(Palm)|(Nokia)|(Panasonic)|(MOT\-)|(SonyEricsson)|(NEC\-)|(Alcatel)|(Ericsson)|(BENQ)|(BenQ)|(Amoisonic)|(Amoi\-)|(Capitel)|(PHILIPS)|(SAMSUNG)|(Lenovo)|(Mitsu)|(Motorola)|(SHARP)|(WAPPER)|(LG\-)|(LG/)|(EG900)|(CECT)|(Compal)|(kejian)|(Bird)|(BIRD)|(G900/V1.0)|(Arima)|(CTL)|(TDG)|(Daxian)|(DAXIAN)|(DBTEL)|(Eastcom)|(EASTCOM)|(PANTECH)|(Dopod)|(Haier)|(HAIER)|(KONKA)|(KEJIAN)|(LENOVO)|(Soutec)|(SOUTEC)|(SAGEM)|(SEC\-)|(SED\-)|(EMOL\-)|(INNO55)|(ZTE)|(iPhone)|(Android)|(Windows CE)|(Wget)|(Java)|(curl)|(Opera)" )
	{
		root /usr/local/website/mobile;
	}

	index index.html index.htm;}

纯客户端js实现方式 下面这段代码放到首页<head>和</head>之间即可

<script type="text/javascript">// <![CDATA[if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
	if(window.location.href.indexOf("?mobile")<0){
		try{
			if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){                                //触屏手机版地址
				window.location.href="http://m.264.cn";
			}else if(/iPad/i.test(navigator.userAgent)){                                //pad版地址
			}else{                                //普通手机版地址
				window.location.href="http://wap.264.cn"
			}
		}catch(e){}
	}}// ]]></script>

推荐的nginx区别手机和PC访问方法 利用前端js和后端nginx配合,js通过设置cookie来设定当前访问哪页面。

增加设置cookie的js代码,这段代码需要在移动网站和PC网站的所有页面都要放置。

function createCookie(name, value, days, domain, path) {  var expires = '';  if (days) {    var d = new Date();    d.setTime(d.getTime() + (days*24*60*60*1000));    expires = '; expires=' + d.toGMTString();  }  domain = domain ? '; domain=' + domain : '';  path = '; path=' + (path ? path : '/');  document.cookie = name + '=' + value + expires + path + domain;}function readCookie(name) {  var n = name + '=';  var cookies = document.cookie.split(';');  for (var i = 0; i < cookies.length; i++) {    var c = cookies[i].replace(/^\s+/, '');    if (c.indexOf(n) == 0) {      return c.substring(n.length);    }  }  return null;}function eraseCookie(name, domain, path) {  setCookie(name, '', -1, domain, path);}

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.264.cn$uri;}

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

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

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

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

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

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

PC版网站配置

upstream app_server {  server 0.0.0.0:9001;}server {  listen 80;  server_name www.264.cn;  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.264.cn$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.264.cn;  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.264.cn$uri;    }    # serve cached pages ...    if (!-f $request_filename) {      proxy_pass http://m_app_server;      break;    }  }}

Via: http://www.nginx.cn/784.html

原文发布于微信公众号 - 马哥Linux运维(magedu-Linux)

原文发表时间:2015-07-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据和云

性能优化:Linux环境下合理配置大内存页

熊军(老熊) 云和恩墨西区总经理 Oracle ACED,ACOUG核心会员 PC Server发展到今天,在性能方面有着长足的进步。64位的CPU在数年前都已...

8665
来自专栏JAVA高级架构

Redis面试题及分布式集群

2911
来自专栏ionic3+

Cordova插件使用——Office文档在线预览那些事

第一种方式,有两种实现方法,一是使用在线的接口(如谷歌、微软……但前者被墙,后者付费使用,当然也可以自己部署个接口处理转换,不想特别折腾也可以用微软的offic...

9464
来自专栏编程

Captcha插件后门分析和修复

0×00 前言 近日看到网上爆出wordpress官方插件captcha出现后门,大惊,本人当初千辛万苦找验证码插件,在十几个插件中选了这款,感觉还挺好用,竟然...

2726
来自专栏林德熙的博客

通过命令行使用微信

虽然本渣是使用 windows 微信也有 UWP 的,但是微信还是不太清真,所以我就找到一个控制台的微信,可以在控制台使用微信。

4042
来自专栏java技术学习之道

常见的Redis面试题及分布式集群讲解

3857
来自专栏java达人

深入解析Java中Flushable接口的flush方法

今天写这篇文章是为了纪念同事讲得两句话:1、flush =在后面对out使劲的抽一鞭子,并命令“赶紧给我写入,我的水桶太满了”;2、写入数据量不大时,可以考虑不...

3778
来自专栏渠道合作伙伴技术圈

Windows server环境下混合云部署DFS文件服务

很多传统企业在设计身份验证和文件服务时,都会使用微软的活动目录和windows server自带的文件共享来实现以上的需求, 公有云的出现给这个场...

84516
来自专栏ChaMd5安全团队

记一次phpcms漏洞利用到获得服务器过程分享

记一次phpcms漏洞利用到获得服务器 by lshc 随着最近phpcms V9 任意上传和注入poc的流出,在圈内又掀起了一阵漏洞利用浪潮,想到之...

6246

如何在Linux上搭建Terraria 游戏服务器?

Terraria是一款二维沙盒游戏,类似于Minecraft(我的世界),允许玩家在开放的世界中探索,构建和战斗。2015年,Terraria开发者宣布支持Li...

7153

扫码关注云+社区

领取腾讯云代金券