Nginx配置网站适配PC和手机
2016-03-26 17:33
579 查看
考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本。访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电脑版的页面,用户如果使用手机访问,则会得到手机版的页面。
1、判断客户端的设备类型
要想让网站适配PC和手机设备,首先要能做出准确的判断。HTTP请求的Header中的User-Agent可以区分客户端的浏览器类型,可以通过User-Agent来判断客户端的设备。
无论是PC还是手机,由于操作系统、浏览器的多样性,自己来实现这个判断并不容易。好在国外有一套开源的通过User-Agent区分PC和手机的解决方案,可以直接使用:
http://detectmobilebrowsers.com/
由于本文使用Nginx,只要在网站上下载Nginx配置即可。
Nginx通过以上的配置,获取HTTP请求的User-Agent,使用正则表达式来匹配手机设备。
首先要准备好网站的PC版和手机版两套页面,通过之前对设备的判断,来反向代理到不同的版本:
如果是静态页面不需要反向代理,那么用root替换proxy_pass:
在用户打开页面后,如果进入了手机版,可能由于错误判断设备,或者用户想获取更多信息,可能会需要打开PC版。在手机版页面的底部,通常会有一个链接指向PC版:
可以通过在点击“电脑版”链接的时候用JavaScript设置一个Cookie来实现这个功能:
同时在Nginx配置中加入判断,如果包含此Cookie则进入PC版:
完成以上配置后,可以通过Chrome浏览器来模拟手机、平板电脑等设备。
1、判断客户端的设备类型
要想让网站适配PC和手机设备,首先要能做出准确的判断。HTTP请求的Header中的User-Agent可以区分客户端的浏览器类型,可以通过User-Agent来判断客户端的设备。
无论是PC还是手机,由于操作系统、浏览器的多样性,自己来实现这个判断并不容易。好在国外有一套开源的通过User-Agent区分PC和手机的解决方案,可以直接使用:
http://detectmobilebrowsers.com/
由于本文使用Nginx,只要在网站上下载Nginx配置即可。
set $mobile_rewrite do_not_perform; if ($http_user_agent ~* "(androidbb\d+meego).+mobileavantgobada\/blackberryblazercompalelainefennechiptopiemobileip(honeod)iriskindlelge maemomidpmmpmobile.+firefoxnetfrontopera m(obin)ipalm( os)?phonep(ixire)\/pluckerpocketpspseries(46)0symbiantreoup\.(browserlink)vodafonewapwindows cexdaxiino") { set $mobile_rewrite perform; } if ($http_user_agent ~* "^(1207631065903gso4thp50[1-6]i770s802sa waabacac(eroos\-)ai(korn)al(avcaco)amoian(exnyyw)aptuar(chgo)as(teus)attwau(di\-mr s )avanbe(ckllnq)bi(lbrd)bl(acaz)br(ev)wbumbbw\-(nu)c55\/capiccwacdm\-cellchtmcldccmd\-co(mpnd)crawda(itllng)dbtedc\-sdevidicadmobdo(cp)ods(12\-d)el(49ai)em(l2ul)er(ick0)esl8ez([4-7]0oswaze)fetcfly(\-_)g1 ug560genegf\-5g\-mogo(\.wod)gr(adun)haiehcithd\-(mpt)hei\-hi(ptta)hp( iip)hs\-cht(c(\- _agpst)tp)hu(awtc)i\-(20goma)i230iac( \-\/)ibroideaig01ikomim1kinnoipaqirisja(tv)ajbrojemujigskddikejikgt( \/)klonkpt kwc\-kyo(ck)le(noxi)lg( g\/(klu)5054\-[a-w])libwlynxm1\-wm3gam50\/ma(teuixo)mc(0121ca)m\-crme(rcri)mi(o8oats)mmefmo(0102bidedot(\- ov)zz)mt(50p1v )mwbpmywan10[0-2]n20[2-3]n30(02)n50(025)n7(0(01)10)ne((cm)\-ontfwfwgwt)nok(6i)nzpho2imop(tiwv)oranowg1p800pan(adt)pdxgpg(13\-([1-8]c))philpirepl(ayuc)pn\-2po(ckrtse)proxpsiopt\-gqa\-aqc(0712213260\-[2-7]i\-)qtekr380r600raksrim9ro(vezo)s55\/sa(gemammmsnyva)sc(01h\-oop\-)sdk\/se(c(\-01)47mcndri)sgh\-sharsie(\-m)sk\-0sl(45id)sm(alarb3itt5)so(ftny)sp(01h\-v\-v )sy(01mb)t2(1850)t6(001018)ta(gtlk)tcl\-tdg\-tel(im)tim\-t\-moto(plsh)ts(70m\-m3m5)tx\-9up(\.bg1si)utstv400v750verivi(rgte)vk(405[0-3]\-v)vm40vodavulcvx(52536061708081838598)w3c(\- )webcwhitwi(g ncnw)wmlbwonux700yas\-yourzetozte\-)") { set $mobile_rewrite perform; } if ($mobile_rewrite = perform) { # 手机 }
Nginx通过以上的配置,获取HTTP请求的User-Agent,使用正则表达式来匹配手机设备。
2、根据设备适配不同的页面
首先要准备好网站的PC版和手机版两套页面,通过之前对设备的判断,来反向代理到不同的版本:location / { proxy_pass http://192.168.20.1; # 电脑版 if ($mobile_rewrite = perform) { proxy_pass http://192.168.20.2; # 手机版 } }
如果是静态页面不需要反向代理,那么用root替换proxy_pass:
location / { root /html/pc; if ($mobile_rewrite = perform) { root /html/mobile; } }
3、手机版链接到PC版
在用户打开页面后,如果进入了手机版,可能由于错误判断设备,或者用户想获取更多信息,可能会需要打开PC版。在手机版页面的底部,通常会有一个链接指向PC版:可以通过在点击“电脑版”链接的时候用JavaScript设置一个Cookie来实现这个功能:
<a href="http://xxx.com/" onclick="document.cookie = "gotopc=true"">电脑版</a>
同时在Nginx配置中加入判断,如果包含此Cookie则进入PC版:
if ($http_cookie ~ "gotopc=true") { set $mobile_rewrite do_not_perform; }
4、调试
完成以上配置后,可以通过Chrome浏览器来模拟手机、平板电脑等设备。
最后给出完整的Nginx配置:
server { listen 80; set $mobile_rewrite do_not_perform; if ($http_user_agent ~* "(androidbb\d+meego).+mobileavantgobada\/blackberryblazercompalelainefennechiptopiemobileip(honeod)iriskindlelge maemomidpmmpmobile.+firefoxnetfrontopera m(obin)ipalm( os)?phonep(ixire)\/pluckerpocketpspseries(46)0symbiantreoup\.(browserlink)vodafonewapwindows cexdaxiino") { set $mobile_rewrite perform; } if ($http_user_agent ~* "^(1207631065903gso4thp50[1-6]i770s802sa waabacac(eroos\-)ai(korn)al(avcaco)amoian(exnyyw)aptuar(chgo)as(teus)attwau(di\-mr s )avanbe(ckllnq)bi(lbrd)bl(acaz)br(ev)wbumbbw\-(nu)c55\/capiccwacdm\-cellchtmcldccmd\-co(mpnd)crawda(itllng)dbtedc\-sdevidicadmobdo(cp)ods(12\-d)el(49ai)em(l2ul)er(ick0)esl8ez([4-7]0oswaze)fetcfly(\-_)g1 ug560genegf\-5g\-mogo(\.wod)gr(adun)haiehcithd\-(mpt)hei\-hi(ptta)hp( iip)hs\-cht(c(\- _agpst)tp)hu(awtc)i\-(20goma)i230iac( \-\/)ibroideaig01ikomim1kinnoipaqirisja(tv)ajbrojemujigskddikejikgt( \/)klonkpt kwc\-kyo(ck)le(noxi)lg( g\/(klu)5054\-[a-w])libwlynxm1\-wm3gam50\/ma(teuixo)mc(0121ca)m\-crme(rcri)mi(o8oats)mmefmo(0102bidedot(\- ov)zz)mt(50p1v )mwbpmywan10[0-2]n20[2-3]n30(02)n50(025)n7(0(01)10)ne((cm)\-ontfwfwgwt)nok(6i)nzpho2imop(tiwv)oranowg1p800pan(adt)pdxgpg(13\-([1-8]c))philpirepl(ayuc)pn\-2po(ckrtse)proxpsiopt\-gqa\-aqc(0712213260\-[2-7]i\-)qtekr380r600raksrim9ro(vezo)s55\/sa(gemammmsnyva)sc(01h\-oop\-)sdk\/se(c(\-01)47mcndri)sgh\-sharsie(\-m)sk\-0sl(45id)sm(alarb3itt5)so(ftny)sp(01h\-v\-v )sy(01mb)t2(1850)t6(001018)ta(gtlk)tcl\-tdg\-tel(im)tim\-t\-moto(plsh)ts(70m\-m3m5)tx\-9up(\.bg1si)utstv400v750verivi(rgte)vk(405[0-3]\-v)vm40vodavulcvx(52536061708081838598)w3c(\- )webcwhitwi(g ncnw)wmlbwonux700yas\-yourzetozte\-)") { set $mobile_rewrite perform; } if ($http_cookie ~ "gotopc=true") { set $mobile_rewrite do_not_perform; } location / { proxy_pass http://192.168.20.1; # 电脑版 if ($mobile_rewrite = perform) { proxy_pass http://192.168.20.2; # 手机版 } } }
相关文章推荐
- 使用 Nginx 代理 Socket.io/WebSocket 及 负载均衡配置
- Apache、NGINX支持中文URL
- Windows下启动,关闭Nginx命令
- 为什么Nginx的性能要比Apache高很多?
- nginx安装和配置
- centos 6.6编译安装nginx--来自阿里云帮助文档
- 【Nginx】核心模块ngx_events_module
- mac 安装 nginx 环境
- Nginx学习笔记——提供静态内容
- 轻松使用Nginx搭建web服务器
- CentOS-6.5下编译安装LNMP环境【nginx1.8.1、mysql5.5.43、php 5.6】
- Nginx学习笔记——配置文件结构
- nginx如何创建多个主机
- Centos7 yum安装nginx
- nginx 限速不生效解决
- nginx服务器优化(并发突破10万)
- nginx及php版本号隐藏
- Nginx探索一
- Mac OS X Mavericks or Yosemite 安装Nginx、PHP、Mysql、phpMyAdmin
- ubuntu 14 x86_64 nginx rtmp ffmpeg 在线直播和点播