Nginx根据User-Agent适配PC和手机

考虑到网站的在多种设备下的兼容性，有不少网站会有手机版和电脑版两个版本。访问同一个网站URL，当服务端识别出用户使用电脑访问，就打开电脑版的页面，用户若是使用手机访问，则会获得手机版的页面。

一、判断客户端的设备类型

要想让网站适配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，使用正则表达式来匹配手机设备。

二、根据设备适配不一样的页面

首先要准备好网站的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;
    }
}

三、手机版连接到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;
}

四、调试

完成以上配置后，能够经过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;  # 手机版
        }
    }
}