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

原文链接：http://www.nginx.cn/784.html

近几年来，随着手机和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;

    }

  }

}

【转】Nginx区分PC或手机访问不同网站的更多相关文章

Nginx区分PC或手机访问不同网站
近几年来,随着手机和pad的普及,越来越多的用户选择使用移动客户端访问网站,而为了获取更好的用户体验,就需要针对不同的设备显示出最合适的匹配,这样就是近年来流行的“响应式web设计”. 响应式web设 ...
Nginx区分PC和手机
目录一.简介二.配置 nginx识别手机端跳转到wap pc端跳转移动端一.简介有时候需要当手机访问PC站页面时自动跳转到对应的手机站页面. 二.配置 nginx识别手机端跳转到wap 即手机 ...
Nginx配置——区分PC或手机访问不同域名
新官网上线,但在手机上访问新官网的体验很差,要求在手机上访问新官网时访问旧官网,可以通过修改Nginx配置来实现自动跳转.首先是新官网的Nginx配置文件加个跳转判断,通过user-agent判断来源 ...
Nginx配置——区分PC或手机访问不同域名以及http跳转https
新官网上线,但在手机上访问新官网的体验很差,要求在手机上访问新官网时访问旧官网,可以通过修改Nginx配置来实现自动跳转.首先是新官网的Nginx配置文件加个跳转判断,通过user-agent判断来源 ...
手写区分PC还是手机移动端
区分首先要了解window.navigator 输出navigator appCodeName: "Mozilla" appName: "Netscape" a ...
php 用于检测是PC还是手机访问
<?php$ua = strtolower($_SERVER['HTTP_USER_AGENT']);$uachar = "/(iphone|android|phone|mobile| ...
PC端手机访问跳转手机站点
第一种: var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.sr ...
nginx 区分pc和mobile 到不同的404页面
if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry|vivo)') { set $mobile_request '1'; } ...
关于安卓手机访问一些网站或者Fiori应用弹出安装证书的提示
有朋友问遇到在安卓手机上安装Fiori Client,打开的时候提示需要安装证书,如下图所示: 我在自己的Android手机试了试,因为我没有装Fiori Client,所以就用手机浏览器直接访问ht ...

随机推荐

【WP开发】在手机屏幕点亮时播放声音
今天说的内容有点流氓,请诸君在开发应用时谨慎使用. 那么,这活儿到底有多流氓呢? 先介绍一下要实现的功能:当用户按电源键(也可以是双击屏幕)点亮手机的屏幕时播放一下短音乐,而且应用程序可以不在前台运行 ...
MySQL的学习--触发器
MySQL包含对触发器的支持.触发器是一种与表操作有关的数据库对象,当触发器所在表上出现指定事件时,将调用该对象,即表的操作事件触发表上的触发器的执行. 创建触发器在MySQL中,创建触发器语法如下 ...
[UWP]涨姿势UWP源码——Unit Test
之前我们讨论了涨姿势UWP的RSS数据源获取,以及作为文件存储到本地,再将数据转化成Model对象.这部分非UI的内容非常适合添加Unit Test.不涉及UI的话,UT写起来简单高效,很是值得投入一 ...
Spark入门实战系列--2.Spark编译与部署（下）--Spark编译安装
[注]该系列文章以及使用到安装包/测试数据可以在<倾情大奉送--Spark入门实战系列>获取 .编译Spark .时间不一样,SBT是白天编译,Maven是深夜进行的,获取依赖包速度不同 ...
inuit.css – 基于 Sass 的强大，可扩展的 CSS 框架
inuit.css 是一个强大的,可扩展的 CSS 框架,另外还是基于 Sass,面向对象的框架.inuit.css 是建立在 BEM 风格的命名约定,非常适合于想要专注于创意而不是代码的设计师以及喜 ...
Eclipse10个最有用的快捷键[From: Internet]
1. ctrl+shift+r:打开资源这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母,比如applic*.xml ...
Windows Azure Virtual Machine (24) Azure VM支持多网卡功能
<Windows Azure Platform 系列文章目录> Update 2016-03-30 一个VM的多张网卡可以在一个VNet的同一个Subnet子网下,笔者亲自测试过了. 如果 ...
加速Web开发的9款知名HTML5框架
与手工编码比起来,HTML5框架在准确性和正确率方面给予了保证.大多数HTML5框架都会有一个组合或者包含一些额外的组件,比如jQuery Scripts.CSS3样式表则以改善多媒体特征的功能性和响 ...
TCP/IP详解学习笔记(13)-TCP坚持定时器，TCP保活定时器
TCP一共有四个主要的定时器,前面已经讲到了一个--超时定时器--是TCP里面最复杂的一个,另外的三个是: 坚持定时器保活定时器 2MSL定时器其中坚持定时器用于防止通告窗口为0以后双方互相等待死 ...
用Android模拟器也可以开发和测试NFC应用
从Android2.3开始支持NFC.不过NFC应用只能在Android手机(或平板电脑)上测试和开发,而且Android手机还必须有NFC芯片.而且如果测试NFC传输文件时至少需要两部支持NFC的 ...

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

【转】Nginx区分PC或手机访问不同网站的更多相关文章

随机推荐

热门专题