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;
}
}
}
Nginx区分PC或手机访问不同网站的更多相关文章
- 【转】Nginx区分PC或手机访问不同网站
原文链接:http://www.nginx.cn/784.html 近几年来,随着手机和pad的普及,越来越多的用户选择使用移动客户端访问网站,而为了获取更好的用户体验,就需要针对不同的设备显示出最合 ...
- Nginx区分PC和手机
目录 一.简介 二.配置 nginx识别手机端跳转到wap pc端跳转移动端 一.简介 有时候需要当手机访问PC站页面时自动跳转到对应的手机站页面. 二.配置 nginx识别手机端跳转到wap 即手机 ...
- Nginx配置——区分PC或手机访问不同域名
新官网上线,但在手机上访问新官网的体验很差,要求在手机上访问新官网时访问旧官网,可以通过修改Nginx配置来实现自动跳转.首先是新官网的Nginx配置文件加个跳转判断,通过user-agent判断来源 ...
- Nginx配置——区分PC或手机访问不同域名以及http跳转https
新官网上线,但在手机上访问新官网的体验很差,要求在手机上访问新官网时访问旧官网,可以通过修改Nginx配置来实现自动跳转.首先是新官网的Nginx配置文件加个跳转判断,通过user-agent判断来源 ...
- PC端手机访问跳转手机站点
第一种: var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.sr ...
- 关于安卓手机访问一些网站或者Fiori应用弹出安装证书的提示
有朋友问遇到在安卓手机上安装Fiori Client,打开的时候提示需要安装证书,如下图所示: 我在自己的Android手机试了试,因为我没有装Fiori Client,所以就用手机浏览器直接访问ht ...
- 手写区分PC还是手机移动端
区分首先要了解window.navigator 输出navigator appCodeName: "Mozilla" appName: "Netscape" a ...
- js判断手机访问web网站跳转到手机版
第一种:直接JS脚本 <script type="text/javascript">try {var urlhash = window.location.hash;if ...
- php 用于检测是PC还是手机访问
<?php$ua = strtolower($_SERVER['HTTP_USER_AGENT']);$uachar = "/(iphone|android|phone|mobile| ...
随机推荐
- 如何让Adobe reader 记住上次pdf文档打开位置？
菜单栏: Edit --> Preferences --> Documents --> 勾选 “Restore last view settings where reopening ...
- Layui 使用问题汇总
1. Layui数据表格中checkbox位置不居中 使用方法渲染的方式生成数据表格,添加了checkbox,但发现checkbox位置不居中,如下图所示 解决办法 通过layui官方社区,找到如下代 ...
- 【java】子类可以通过调用父类的public方法调用父类的private方法，为什么？
代码1: 打印结果: 代码2: 运行结果: 问题: 代码1中super是父类自己调用自己的add()方法,并在add()方法中调用了私有的del()方法,那为什么打印出来的this是子类? 代码2中t ...
- CSS3：animation动画
animation只应用在页面上已存在的DOM元素上,学这个不得不学keyframes,我们把他叫做“关键帧”. keyframes的语法法则: @keyframes flash { from{ le ...
- 腾讯云会话服务器node+nginx
1.除了一个正常的服务器还需要一个会话服务器(websocket),利用node加socket.io来做 2.正常安装Nginx yum install nginx 3.Nginx的配置内容略微不同( ...
- 【译】你对position的了解有多少？
此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...
- python 列表合并
列表合并主要有以下方法: 1.用list的extend方法,L1.extend(L2),该方法将参数L2的全部元素添加到L1的尾部 结果:[1, 2, 3, 4, 5, 1, 20, 30] 2.用切 ...
- Linux命令未找到(command not found)，误删Linux path原始路径
1.执行:/bin/vim /etc/profile (打开并编辑profile将Path修改正确,然后保存退出) 2.执行:export PATH=/usr/bin:/usr/sbin:/bin:/ ...
- vue2组件之异步组件...resolve
看开源项目的时候看到这样的用法: 发现与之前定义组件的方式不一样,这个resolve又是什么? 原来这个是vue的异步组件实现,可以看这里:<异步组件> 异步组件的需求: 在大型应用中,我 ...
- Java实现算法之--选择排序
选择排序也是比較简单的一种排序方法,原理也比較easy理解,它与冒泡排序的比較次数同样,但选择排序的交换次数少于冒泡排序.冒泡排序是在每次比較之后,若比較的两个元素顺序与待排序顺序相反,则要进行交换, ...