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;
    }
  }
}
时间： 2024-12-03 07:40:02

Nginx区分PC或手机访问不同网站的相关文章

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

原文链接:http://www.nginx.cn/784.html 近几年来,随着手机和pad的普及,越来越多的用户选择使用移动客户端访问网站,而为了获取更好的用户体验,就需要针对不同的设备显示出最合适的匹配,这样就是近年来流行的“响应式web设计”. 响应式web设计是一种纯前端技术js.css等实现的针对不同设备访问同一网址看到不同的布局,是页面内容更适合当前设备阅读.但这个不是本文的重点,重点还是放在nginx如何实现上来. 本文要讲的的是如何使用nginx区分pc和手机访问不同的网站,是

Nginx配置网站适配PC和手机

考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本.访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电脑版的页面,用户如果使用手机访问,则会得到手机版的页面. 1.判断客户端的设备类型 要想让网站适配PC和手机设备,首先要能做出准确的判断.HTTP请求的Header中的User-Agent可以区分客户端的浏览器类型,可以通过User-Agent来判断客户端的设备. 无论是PC还是手机,由于操作系统.浏览器的多样性,自己来实现这个判断并不容易.好在国外有一套开源的通

Nginx配置站点适配PC和手机

考虑到站点的在多种设备下的兼容性,有非常多站点会有手机版和电脑版两个版本号.訪问同一个站点URL,当服务端识别出用户使用电脑訪问.就打开电脑版的页面,用户假设使用手机訪问,则会得到手机版的页面. 1.推断client的设备类型 要想让站点适配PC和手机设备,首先要能做出准确的推断.HTTP请求的Header中的User-Agent能够区分client的浏览器类型.能够通过User-Agent来推断client的设备. 不管是PC还是手机,因为操作系统.浏览器的多样性,自己来实现这个推断并不eas

手机访问PC网站自动跳转到手机网站代码（转）

4G时代,手机网站已经非常普遍了,一般手机网站都有一个二级域名来访问,比如 m.16css.com 如果手机直接访问www.16css.com 就是PC网站,在手机上浏览电脑版网站体验非常不好. 如果能够手机访问PC端电脑网站自动跳转到手机网站就好了: 代码如下: 将以下代码放在首页区 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 3

C#判断用户是手机访问还是PC访问

今天在做一个wap网站时,需要限制PC用户访问.网上找了很多资料,效果都不怎么理想.其实原理就是根据HTTP_USER_AGENT判断检查用户在用什么浏览器,再根据业务做相应的逻辑处理. 代码如下: 1 public class IsPhoneAttribute : ActionFilterAttribute 2 { 3 public override void OnActionExecuting(ActionExecutingContext filterContext) 4 { 5 strin

在PC上测试移动端网站和模拟手机浏览器的5大方

查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模拟手机总共有四种方法,原理都一样,通过伪装User-Agent,将浏览器模拟成Android设备.以下标星的为推荐方法. 1.新建Chrome快捷方式 右击桌面上的Chrome浏览器图标,在弹出的右键菜单中选择"复制",复制一个图标副本到桌面.右击该副本,选择"属性",

在PC上测试移动端网站和模拟手机浏览器的5大方法

查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模拟手机总共有四种方法,原理都一样,通过伪装User-Agent,将浏览器模拟成Android设备.以下标星的为推荐方法. 1.新建Chrome快捷方式 右击桌面上的Chrome浏览器图标,在弹出的右键菜单中选择"复制",复制一个图标副本到桌面.右击该副本,选择"属性",

通过PHP自带的$_SERVER判断 手机访问网站自动跳转到手机版

需要有PC版网站和移动版网站,当手机访问域名的时候,通过PHP自带的$_SERVER判断浏览设备并跳转到移动版页面.如果是PC电脑打开网址,则不跳转直接访问pc版. 1 <?php 2 //php判断客户端是否为手机 3 $agent = $_SERVER['HTTP_USER_AGENT']; 4 if(strpos($agent,"NetFront") || strpos($agent,"iPhone") || strpos($agent,"MI

仿58上市公司(PC站+手机站)网站源码

该源码是仿58上市公司(PC站+手机站)网站源码,2014最新仿58同城上市公司源http://码 多城市分类信息源码带wap,安装文件:.访问 /install.php进行安装,出现数据库连接失败的问题修改:\data\mysql_config.php修改里面的数据库文件 后台登录地址你的网址/admin/index.php 后台帐号密码admin<ignore_js_op> <ignore_js_op> 详细说明:http://php.662p.com/thread-581-1