近幾年來(lái)，隨著手機(jī)和pad的普及，越來(lái)越多的用戶選擇使用移動(dòng)客戶端訪問(wèn)網(wǎng)站，而為了獲取更好的用戶體驗(yàn)，就需要針對(duì)不同的設(shè)備顯示出最合適的匹配，這樣就是近年來(lái)流行的“響應(yīng)式web設(shè)計(jì)”。
響應(yīng)式web設(shè)計(jì)是一種純前端技術(shù)js、css等實(shí)現(xiàn)的針對(duì)不同設(shè)備訪問(wèn)同一網(wǎng)址看到不同的布局，是頁(yè)面內(nèi)容更適合當(dāng)前設(shè)備閱讀。但這個(gè)不是本文的重點(diǎn)，重點(diǎn)還是放在nginx如何實(shí)現(xiàn)上來(lái)。
本文要講的的是如何使用nginx區(qū)分pc和手機(jī)訪問(wèn)不同的網(wǎng)站，是物理上完全隔離的兩套網(wǎng)站(一套移動(dòng)端、一套pc端),這樣帶來(lái)的好處pc端和移動(dòng)端的內(nèi)容可以不一樣，移動(dòng)版網(wǎng)站不需要包含特別多的內(nèi)容，只要包含必要的文字和較小的圖片，這樣會(huì)更節(jié)省流量。有好處當(dāng)然也就會(huì)增加困難，難題就是你需要維護(hù)兩套環(huán)境，并且需要自動(dòng)識(shí)別出來(lái)用戶的物理設(shè)備并跳轉(zhuǎn)到相應(yīng)的網(wǎng)站，當(dāng)判斷錯(cuò)誤時(shí)用戶可以自己手動(dòng)切換回正確的網(wǎng)站。
下面以264查詢網(wǎng)為實(shí)例來(lái)說(shuō)明如何實(shí)現(xiàn)上面的需求。
明確的的需求：
1.制作兩個(gè)站點(diǎn)PC端網(wǎng)站www.264.cn，和移動(dòng)端網(wǎng)站m.264.cn
2.使用pc或移動(dòng)設(shè)備訪問(wèn)任何一個(gè)域名都會(huì)跳到相應(yīng)的站點(diǎn)。
3.用戶可以選擇訪問(wèn)移動(dòng)版還是PC版網(wǎng)站，移動(dòng)版網(wǎng)站始終有切換到PC版的鏈接，PC版當(dāng)網(wǎng)站通過(guò)手機(jī)訪問(wèn)時(shí)會(huì)提供移動(dòng)版網(wǎng)站的鏈接。
4.當(dāng)用戶選著訪問(wèn)其中一種類(lèi)型的網(wǎng)站后，保存設(shè)置結(jié)果生效時(shí)間為24小時(shí)，當(dāng)然長(zhǎng)短可以自己設(shè)置。
簡(jiǎn)單的服務(wù)器端實(shí)現(xiàn)方法
有兩套網(wǎng)站代碼，一套PC版放在/usr/local/website/web，一套移動(dòng)版放在/usr/local/website/mobile。只需要修改nginx的配置文件件，nginx通過(guò)UA來(lái)判斷是否來(lái)自移動(dòng)端訪問(wèn)，實(shí)現(xiàn)不同的客戶端訪問(wèn)不同內(nèi)容。
這種方法的缺點(diǎn)是移動(dòng)端和PC端用同一個(gè)域名，存在黑帽的嫌疑，而且UA并不是總是判斷的準(zhǔn)確，如果判斷錯(cuò)誤的情況下，用戶不能手動(dòng)修改訪問(wèn)的網(wǎng)站類(lèi)型。
關(guān)鍵的Nginx配置如下：
location / { #默認(rèn)PC端訪問(wèn)內(nèi)容 root /usr/local/website/web; #如果是手機(jī)移動(dòng)端訪問(wèn)內(nèi)容 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實(shí)現(xiàn)方式
下面這段代碼放到首頁(yè)<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)){ //觸屏手機(jī)版地址 window.location.; }else if(/iPad/i.test(navigator.userAgent)){ //pad版地址 }else{ //普通手機(jī)版地址 window.location. } }catch(e){} }}// ]]></script>推薦的nginx區(qū)別手機(jī)和PC訪問(wèn)方法
利用前端js和后端nginx配合，js通過(guò)設(shè)置cookie來(lái)設(shè)定當(dāng)前訪問(wèn)哪頁(yè)面。
增加設(shè)置cookie的js代碼，這段代碼需要在移動(dòng)網(wǎng)站和PC網(wǎng)站的所有頁(yè)面都要放置。
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增加如下配置，根據(jù)UA和cookie判斷當(dāng)前是移動(dòng)端還是PC端訪問(wèn)
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;}移動(dòng)版頁(yè)面添加PC版鏈接
默認(rèn)用戶進(jìn)來(lái)時(shí)會(huì)先判斷UA，如果是手機(jī)端訪問(wèn)就會(huì)進(jìn)入手機(jī)版，但也會(huì)存在誤判進(jìn)入手機(jī)版或者需要更多信息進(jìn)入PC版，那么就需要在移動(dòng)版的頁(yè)面放入代碼，讓用戶可以從移動(dòng)版切換到web版并且下次訪問(wèn)會(huì)保留設(shè)置。
<a onclick="setCookie('iphone_mode', 'full', 1, '264.cn')" ) { rewrite ^.+ http://www.264.cn$uri; } # serve cached pages ... if (!-f $request_filename) { proxy_pass http://m_app_server; break; } }}除非注明，本站文章均為: Nginx中文站原創(chuàng)，轉(zhuǎn)載請(qǐng)注明本文地址:http://www.nginx.cn/784.html--完--
聯(lián)系客服
